Headers issue with cloud.typography causing 403 error

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
https://shop.every-tuesday.com/

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.

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:

@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

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

Hi @biggs and @zltnvrs,
Just ran into the the exact same issue. How did you resolve it?
I’m also using Gatsby.js with gatsby-plugin-netlify.
Thanks.

My last findings about this is that you have to make sure to send the request header values (mentioned above_ to the service which is hosting your fonts. They most likely they have documentation about this, although i wasn’t able to find them.

1 Like

Thanks for your reply, @zltnvrs!
AFAIK they don’t have any technical documentation at all, so I’ve just send them an email :sleeping:

I’ll keep you posted on any updates.

2 Likes

I’m facing the same issue now too! Has anybody had any success?

Okay, here is a bit of a hacky but effective way to get typography.com fonts to work in Gatsby sites on Netlify. Add <meta name="referrer" content="origin" /> to the <head> of your html.js file. Then, immediately following the meta tag place your <link> tag for the fonts.css file. For some reason when the link and meta tags are added with Helmet it doesn’t work but when they are hardcoded in the html.js file it works. The way this works is that it tells the browser to add the domain to the “Referer” of the Request Header when downloading the CSS file. Typography.com apparently validates your request with this particular header.

2 Likes

Netlify support suggested using a redirect, and works!

[[redirects]]
  from = "cloud-typography/fonts.css"
  to = "https://cloud.typography.com/7369076/7111412/css/fonts.css"
  status = 200