Failed to decode downloaded font, OTS prasing error on Angular 6 app deployed with nginx

Question

I've deployed the angular dist folder with following structure on ngnix. But getting the Failed to decode downloaded font: host/rfid/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0; OTS parsing error: invalid version tag error.

Here's how I've included the font-awesome.

package.json

"dependencies": {
-------
"font-awesome": "^4.7.0",
--------
}

angular.json

"styles": [
-----,
"node_modules/font-awesome/scss/font-awesome.scss",
-----
]

Here's the path of where I'm deploying the dist folder.

/user/www/data/rfid/dist

Following is my nginx conf file default.conf.

proxy_cache_path /tmp/nginx levels=1:2 keys_zone=nginx_cache_zone:10m inactive=60m;
proxy_cache_key "$scheme$request_method$host$request_uri";

client_max_body_size 20M;
proxy_read_timeout 600;

server {
    listen 80 default_server;
    server_name something;
    location /rfid/ {
      alias /user/www/data/rfid/dist/;
      try_files $uri$args $uri$args/ /rfid/index.html;
   }
}

Let me also include what my build looks like.

What am I missing here? Thanks in advance.

Edit: If this is the issue of query string being appended to the url that's looking for file, what can I possibly do when I'm only specifying the dependency and adding the sass file?

Answer 1

Had the same issue with the OP as I brought in Font Awesome 4.7.0 as an NPM dependency with no control to modify the font-url.

We ended up changing Nginx's try_files configuration to also check for $uri without the $args.

So from:

try_files $uri$args $uri$args/ /rfid/index.html;

you can go with:

try_files $uri$args $uri$args/ $uri $uri/ /rfid/index.html;

Make sure you understand the implications for the rest of your site if you're going with this approach.

Another option would be to upgrade to Font Awesome 5.x which does not use version strings anymore, as per committer's comment and this GitHub issue.

Answer 2

I find with these sorts of issues the best thing to do is check the issue tracker on the dependencies repository. Most of the time you will find someone else who has experienced the same problem.

I dropped your error in the font-awesome issue tracker and it looks like some people have had experienced a similar issue:

Try removing the ?v=4.6.3 query string from your CSS.

Example:

@font-face {
  font-family: 'FontAwesome';
  src: font-url("font-awesome/fonts/fontawesome-webfont.eot");
  src: font-url("font-awesome/fonts/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), font-url("font-awesome/fonts/fontawesome-webfont.woff2") format('woff2'), font-url("font-awesome/fonts/fontawesome-webfont.woff") format('woff'), font-url("font-awesome/fonts/fontawesome-webfont.ttf") format('truetype'), font-url("font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}

Hope that helps.