Best practice for local fonts? (Google Fonts CORS bug)

  • What’s your URL? https://blog.zcyph.cc

  • What version of Ghost are you using? Just upgraded to v4.3.3 thanks to the forum banner, currently running Editorial theme

  • How was Ghost installed and configured? I used Digital Ocean’s 1-click Ghost droplet for this one

  • What Node version, database, OS & browser are you using? This droplet has Node v12.18.0 + MySQL 5.7.33. The main machine I use to administer/browse runs Linux (Manjaro 21.0.3 + 5.10.30-1-MANJARO kernel + XFCE 4.16), I keep an assortment of browsers including vanilla firefox and chromium and some variants of them all kept up to date, not likely relevant to this topic though.

  • What errors or information do you see in the console? I am looking at setting up local fonts, because on one of my other machines I noticed fonts weren’t working properly, and its browser console showed “Cross-Origin Request Blocked” error related to Google Fonts Roboto Slab and Open Sans. While it isn’t affecting all or most devices, I think I’d just prefer to have them local anyway.

  • What steps could someone else take to reproduce the issue you’re having? I suppose anyone running the same version of Ghost with Editorial (or maybe other themes have the same issue too? I don’t know) could potentially see the issue, but it seems hit or miss.

My ask is less about troubleshooting the CORS error and more about learning what the ideal process / best practice is for configuring fonts to be used locally instead. What I’ve done so far is download the font zip file from Google for both Roboto Slab and Open Sans and extracted them to /var/www/ghost/content/themes/Editorial-master/assets/fonts/ each in their respective directories.

I’ve looked at some other threads including: Using custom local font

I guess I’m just a little slow on this one and still not getting it. Could I get some help with the specific steps, custom CSS file location, exact syntax I should be using and anything else? Much appreciated! Loving Ghost so far after a brief run with Wordpress (ugh) and looking over most of the other options out there.

1 Like

If you’re using DO Spaces there is a CORS Configurations section in the settings. If you’re not using Spaces then you’ll need to modify the config file for nginx/apache as far as I know.

You could probably just use Code Injection with @font-face, could you not? Replacing the fonts in your theme with your custom font, which ideally would be located in a custom public folder, like Assets/Fonts or something.

CORS

it’s likely the case that a proxy somewhere along the way is stripping out the necessary header. Access-Control-Allow-Origin:*

Local Font Loading Strategy

  1. Install the local fonts. You said you’ve done that already :white_check_mark:
  2. Load the fonts in your CSS. I use the asset helper to load in the fonts, but you can also do this via code injection in the header:
<style>
@font-face {
            font-family: 'Roboto Slab';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: local('Roboto Slab'),
            url(/assets/fonts/path-to-font.woff2) format('woff2'), 
            url(/assets/fonts/path-to-font.woff) format('woff');  /* You need to put your font filename here  */
        }
body {
            font-family: 'Roboto Slab', sans-serif; /* Depending on your theme, you may need other overrides here*/
        }
</style>

Thank you. Not using spaces. I tried adding add_header Access-Control-Allow-Origin to nginx but it doesn’t seem to have done anything.

Not trying to use any custom font, I want the fonts to stay exactly the same but just work properly across all devices. I’m using the Editorial theme. I’m trying to figure out what the right syntax would be to add in the code injection section without breaking anything along the way.

Thanks. When I use this, I get some changes, but it still isn’t consistent across devices somehow. For example, what it looks like on the problematic device vs what it should look like.

Edit: found the issue, Pihole was blocking fonts.gstatic.com. Ugh

Ok this is pretty embarrassing, finally found the issue and it wasn’t actually the CORS thing that browser console suggested. Pihole was blocking fonts.gstatic.com. I guess the other devices must have all had those fonts already or something so the problem was less evident.

Thanks for all the help, it’s all working normally after whitelisting that.

1 Like

Do you get fonts defined that way, show correctly in all/most browsers?
I have an otf font and it fails to show/display in Vivaldi & Chromium, on Fedora, other browsers show it a ok.
Interestingly, I use that same font outside of Ghost and there it loads fine everywhere, including two above browsers.
Many thanks.