Solvedangular cli 1.7.0 fonts are corrupted after prod build
✔️Accepted Answer
I had this problem in combination with nginx. When I added the following line to server part in nginx configuartion file it was resolved:
location ~* \.(eot|otf|ttf|woff|woff2)$ { root /usr/share/nginx/html; }
Other Answers:
@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700");
in my theme css
seems to not load my fonts. I imported them manually in my index.html and the problem is gone.
This happens when using ng build --prod
.
ng serve
works fine.
Same problem with 1.7.1
and latest semantic-ui
Failed to decode downloaded font: http://localhost:4200/icons.674f50d287a8c48dc19b.eot?#iefix)%20format(%27embedded-opentype%27),url(themes/default/assets/fonts/icons.woff2)%20format(%27woff2%27),url(themes/default/assets/fonts/icons.woff)%20format(%27woff%27),url(themes/default/assets/fonts/icons.ttf)%20format(%27truetype%27),url(themes/default/assets/fonts/icons.svg#icons)%20format(%27svg%27
OTS parsing error: invalid version tag
1.7.0 works just fine when running ng serve --aot
I'm experiencing similar issue after migrating from 1.6.8 to 1.7.3. Steps to reproduce:
ng new latest-project
cd latest-project
Download any font as a sample and put it into the project directory. I'll use Font Awesome as example. Then manually add @font-face definition to styles.css:
@font-face {
font-family: "Font Awesome";
src: url("./fa-solid-900.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
body {
font: "Font Awesome";
}
Then try to build the project:
ng build --prod
Date: 2018-03-15T08:46:41.758Z
Hash: ed0a71e03117b9c23e5c
Time: 4473ms
chunk {0} polyfills.bf95165a1d5098766b92.bundle.js (polyfills) 59.4 kB [initial] [rendered]
chunk {1} main.16bd2dbbc06007f15324.bundle.js (main) 154 kB [initial] [rendered]
chunk {2} styles.d9d6e24bded53673137d.bundle.css (styles) 137 bytes [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]
WARNING in Invalid font values at 11:1. Ignoring.
Fonts will not work, because they are removed from the output bundle. If I just downgrade @angular/cli to 1.6.8 in the same project without applying any changes to project and build it in the prod mode it's working fine.
Just tried with 1.7.4 (released 2 days ago) - issue is still present.
Versions
Angular CLI: 1.7.0
Node: 8.9.1
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.7.1
webpack: 3.11.0
Repro steps
Observed behavior
Failed to decode downloaded font: http://***/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0
OTS parsing error: invalid version tag
Desired behavior
FontAwesome icons works fine
Mention any other details that might be useful (optional)
With cli 1.6.8 everything is OK