Briefly summarize the issues you have been experiencing.
I’m pushing my site from github to Netlify and I’m using Fonts by Hoefler&Co. 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:
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)
@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.
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
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.
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.