If you’re trying to use Typography.com’s Cloud.typography service for Cloud-Hosted Web Fonts on your Netlify site, you may encounter something like I did when you push your site to Netlify:
fonts.css 403 Forbidden
Here are all of the steps I took to fix this. The final
piece that was not obvious to me but was the key to solving
this issue (a
this Netlify Community post.
Add meta/referrer tag & CSS Key to head of your main
The meta tag below will ensure that the request to
typography.com to load
fonts.css is signed with
I’m not 100% sure what happens on the Netlify side that makes this meta tag a required step, so I’ll update this post once I find out.
If you’re using Gatsby, you’ll need to add this meta tag
and your CSS Key to an
html.js file. Adding
these tags to layout files that use react-helmet to control
the head tags will not work.
// html.js <head> ... <meta name="referrer" content="origin" /> <link rel="stylesheet" type="text/css" href="//cloud.typography.com/******/*****/css/fonts.css" /> ... </head>
Cloud.typography domain settings: Ensure
your domains in the Cloud.typography dashboard are correct.
For my site, I’m using both
Cloud.typography Production Mode: Ensure you’re running in Production Mode in the Cloud.typography dashboard.
Static folder for font folder and files: For my Gatsby site, I placed the folder (ex. /1234) containing the .css and .eot files from Cloud.typography inside my /static folder. When I build to Netlify, the folder is then available at https://desiraebeberniss.com/1234 and typography.com can then validate against that URL.
I hope this helps you if you’re running into this issue! Troubleshooting this was an interesting process, and most of the things I tried had no effect (upgrading my Gatsby site and all of its dependencies, disabling service workers, relocating code all over the place).