vue-cli-service serve corrupts local fonts

[crystalfp]

Version

4.5.15

Reproduction link

Environment info

Environment Info:

  System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.12.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Spartan (44.22000.120.0), Chromium (96.0.1054.62)
  npmPackages:
    @vue/cli-overlay:  4.5.15
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.15
    @vue/cli-plugin-router:  4.5.15
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.15
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.15
    @vue/cli-service: ~4.5.0 => 4.5.15
    @vue/cli-shared-utils:  4.5.15
    @vue/compiler-core:  3.2.26
    @vue/compiler-dom:  3.2.26
    @vue/compiler-sfc: ^3.0.0 => 3.2.26
    @vue/compiler-ssr:  3.2.26
    @vue/component-compiler-utils:  3.3.0
    @vue/devtools-api:  6.0.0-beta.21.1
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/preload-webpack-plugin:  1.1.2
    @vue/reactivity:  3.2.26
    @vue/reactivity-transform:  3.2.26
    @vue/runtime-core:  3.2.26
    @vue/runtime-dom:  3.2.26
    @vue/server-renderer:  3.2.26
    @vue/shared:  3.2.26
    @vue/web-component-wrapper:  1.3.0
    @yeliulee/vue-mdi-svg: ^1.0.4 => 1.0.4
    eslint-plugin-vue: ^7.0.0 => 7.20.0
    typescript: ~4.1.5 => 4.1.6
    vue: ^3.0.0 => 3.2.26
    vue-eslint-parser:  7.11.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.8 (16.8.3)
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
    vue-tippy: ^6.0.0-alpha.42 => 6.0.0-alpha.43
    vuedraggable: ^4.1.0 => 4.1.0
    vuex: ^4.0.0-0 => 4.0.2
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1) Download a font from Google fonts (I use Quattrocento font) 2) Put the .ttf files in src/styles/fonts 3) Create a css file containing:

@font-face {
  font-family: "Quattrocento Sans";
  font-style: normal;
  font-weight: normal;
  src: url(/src/styles/fonts/QuattrocentoSans-Regular.ttf) format("truetype");
  font-display: swap;
}

4) The font is not loaded and the following message appears in the browser console:

Failed to decode downloaded font: http://localhost:8080/src/styles/fonts/QuattrocentoSans-Regular.ttf
OTS parsing error: invalid sfntVersion: 1008813135

5) If I bypass the vue-cli server and load the font directly from Google, it works. I use:

@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

What is expected?

The font loaded as happens with the same font files in another application not based on Vue.

What is actually happening?

See above the error message. Seems like the vue-cli development server is corrupting the file, like a wrong mime type or a CR LF issue.

Thanks for looking! mario

[crystalfp]

Same error if I move my fonts files under public/ changing the url. Now the message is:

Failed to decode downloaded font: http://localhost:8080/public/fonts/QuattrocentoSans-Regular.ttf
OTS parsing error: invalid sfntVersion: 1008813135

Also the same message using truetype fonts or woff2 ones

[ghost]

Can you provide a repo to get that reproduced?

[crystalfp]

Not yet. I'll prepare it soon. Thanks for your patience.

[crystalfp]

Assembling the example revealed the source of the error. The problem has been generated by a wrong path in @font-face src item. If I put the font files under /public/fonts, the url should start with /fonts. Leaving /public in front of it generates the curious error mistakenly taken as a file corruption. Maybe a better error message could have made the debugging faster, but I don't know who should generate it. So, this works:

@font-face {
  font-family: "Quattrocento Sans";
  font-style: normal;
  font-weight: normal;
  src: url(/fonts/QuattrocentoSans-Regular.woff2) format("woff2"),
       url(/fonts/QuattrocentoSans-Regular.ttf) format("truetype");
  font-display: swap;
}

Sorry for the noise mario