Font-Awesome fonts (woff) not loading via Netlify CDN

Question

I have a Netlify CDN pulling files via my GitHub, and everything works perfectly fine it seems, except loading the fonts. I'm rather new to CDNs but have been researching and learning a lot.

But... I've spent 4 hours researching how to enable this, and the only thing I can find in their documentation or anyone else with similar problems, is that I need to create a _header file in the root directory, but they don't specify anything to do with the fonts. They just tell me this example code.

Site link: https://www.netlify.com/docs/headers-and-basic-auth/

Example Header:

## A path:
/templates/index.html
  # Headers for that path:
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
/templates/index2.html
  X-Frame-Options: SAMEORIGIN

Does anyone have any experience with this? I'm about to go find a new CDN, but not sure who else is reliable.

Answer 1

Netlify allows for you to setup Headers in your pages using a structured configuration in the netlify.toml file.

To add a header for the woff content type you need a header equivalent of:

/*.woff
    Access-Control-Allow-Origin: *
    Content-Type: application/font-woff

Using the Netlify Tool to test valid headers, your settings in the config would be:

netlify.toml

[[headers]]
  for = "/*.woff"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Content-Type = "application/font-woff"

The netlify.toml file exists at the root of the site on Netlify. The paths need to be valid also and the above is just an example.