Nginx and Fontawesome v5 Issues

Question

While this has been asked in various forms over the years, non of the answers have worked for me and the solution that is working makes no sense at all.
I'm hoping someone will be able to either make sense of why the solution solves the problem, or help me pin point the real issue.
The issue is that some of our woff2 font-awesome fonts don't display correctly, as can be seem by the output below

Request URL: https://example.com/fontawesome-webfont.af7ae505a9eed503f8b8.woff2?v=4.7.0
Request Method: GET
Status Code: 200 
Remote Address: xxx.xxx.xxx.xxx:443
Referrer Policy: no-referrer-when-downgrade
content-encoding: br
content-type: text/html

Adding a location block as below seems to fix the issue, even though the location block itself does nothing (From my understanding at least)

location ~* \.(eot|otf|ttf|woff|woff2)$ {
}

I also have the follow mapped in my mime.types

font/ttf     ttf;
font/woff     woff;
font/woff2     woff2;
application/font-ttf     ttf;
application/font-woff     woff;
application/font-woff2     woff2;
application/x-font-ttf     ttc ttf;
application/x-font-otf     otf;
application/x-font-woff     woff;
application/x-font-woff2     woff2;

We're using brotli and gzip for compression

Answer 1

I also faced the same issue. Posting my solution so that it might help someone. Solutions that worked for me

Solution 1

location ~* \.(eot|otf|ttf|woff|woff2)$ {
   access_log      off;
   log_not_found   off;
   # expires 30d;
   add_header Access-Control-Allow-Origin *;

   types     {font/opentype otf;}
   types     {application/vnd.ms-fontobject eot;}
   types     {font/truetype ttf;}
   types     {application/font-woff woff;}
   types     {font/x-woff woff2;}
}

but if I add the above in the mime.type it is not working. so for that I tried below

Solution 2

Add this to mime.types

    font/opentype                       otf;
    font/truetype                       ttf;
    application/font-woff               woff;
    font/x-woff                         woff2;

Due to the order of definition the mime.types is overridden by the default application/octet-stream

nginx.conf

Add the include /etc/nginx/mime.types; again inside your location block

location ~* \.(eot|otf|ttf|woff|woff2)$ {
   access_log      off;
   log_not_found   off;
   # expires 30d;
   include             /etc/nginx/mime.types;
   add_header Access-Control-Allow-Origin *;
}

Note

If you have cache enabled try to clear the server cache once. also if you are using CDN like cloudflare make sure you purge the cache after making this changes.