Headers issue with cloud.typography causing 403 error

answered
#1

Briefly summarize the issues you have been experiencing.
I’m pushing my site from github to Netlify and I’m using https://www.typography.com/webfonts/ to serve up my cool design font. However when I try to move to production and load the css that they are serving up from their servers. According to their support team

“I took a look at your site and saw in the console that the request for fonts is being denied because your server isn’t including its referrer in the request. You will want to update what headers your server sends along with requests.”

Please provide a link to your live site hosted on Netlify

What have you tried as far as troubleshooting goes? Do you have an idea what is causing the problem?
server isn’t including its referrer in the request

Do you have any other information that is relevant, such as links to docs, libraries, or other resources?

Here is the code they want me adding in the <head> tag:

<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7389876/6653412/css/fonts.css" />

Any help on how to accomplish this would be great!
Thanks.

#2

First, if you set up your domain the same way as the typography documentation suggested then i would try the following:

I think you have to set these headers manually for these css files, i’m not sure what’s going to work, because there’s no information about this in the typography.com site, but i would try these adding them line by line:

(My line of thinking: your fonts are loading correctly, so in the Chrome Devtools in the Network section i inspected all the Request Header for these)

referer: https://shop.every-tuesday.com/
:authority:shop.every-tuesday.com
:scheme:https
origin:https://shop.every-tuesday.com

You can do this by adding this on the netlify.toml file, here’s an example:

[[headers]]
for = "/*"
[headers.values]
Cache-Control = "public, max-age=360000" 

You can find more information on the Netlify Documentation
I really liked the website BTW, hats off! :slight_smile:

#3

@zltnvrs
Thank you so much for taking a look! It’s interesting you were able to see that info using chrome dev tools because for me this is what shows up for that specific css file. Under the request headers - its pretty much blank - no referrer.

I have my gatsby netlify plugin configured like this:

      resolve: `gatsby-plugin-netlify`,
      options: {
        headers: {
          "/*": [
            `Referrer-Policy: no-referrer-when-downgrade`,
            `Access-Control-Allow-Origin: *`,
            `Expect-CT: enforce,max-age=604800`
          ]
        }
}```

Again much appreciated with any help!
Cheers,
Spencer
#4

Looks like your _redirects file is generated by gatsby which is fine.
You may have to add the rules i mentioned above here in the gatsby config:

"static/fonts.css" : [
'referer: https://shop.every-tuesday.com/',
':authority:shop.every-tuesday.com',
':scheme:https'
'origin:https://shop.every-tuesday.com'
]

These Request Headers were for your fonts and NOT for the css files, i think some these values will fix your problem, you have to try them all, by triggering a deploy
One thing which is missing from here is the direct path to your fonts.css file, you have to change it to the path you have on the production so would be something like /static/fonts/fonts.css