All Posts

Using Typography.com's Cloud.typography with Gatsby & Netlify

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 meta tag) came from this Netlify Community post.

Steps

Add meta/referrer tag & CSS Key to head of your main page template: The meta tag below will ensure that the request to typography.com to load fonts.css is signed with your domain.

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 desiraebeberniss.com and *.desiraebeberniss.com (wildcard subdomain).

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.

Good luck!

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).

I’m grateful that I finally found this thread on Netlify’s Community site, or I’d still be wrestling with this issue. It’s obviously time for me to learn more about referrer policies!