CODEWITHSUNDEEP
font-awesomewebfontsnetlify
logicK
logicK

Reputation: 207

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

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.

Upvotes: 4

Views: 3403

Answers (2)

rriemann
rriemann

Reputation: 548

The file _headers in the root directory can be used for configuration of headers according to the documentation https://www.netlify.com/docs/headers-and-basic-auth/.

The following examples demonstrates how all ttf and woff fonts in the directory /assets/fonts/ and its sub directories can be given access from any origin.

# Custom Netlify Headers
# https://www.netlify.com/docs/headers-and-basic-auth/

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

/assets/fonts/*.ttf
  Access-Control-Allow-Origin: *
  Content-Type: application/font-ttf

Upvotes: 1

talves
talves

Reputation: 14353

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.

Upvotes: 8

Related Questions