Self-hosted Google Fonts in Hugo

This site¹ is built with Hugo² and served via GitHub pages³. Recently, I decided to change the font here to make things more consistent across different devices. However, I didn’t want to go with Google Fonts for a few reasons:

• CDN is another dependency.
• Hosting static assets on GitHub Pages has served me well.
• Google Fonts tracks users and violates⁴ GDPR in Germany. Google Analytics does that too. But since I’m using the latter anyway, this might come off a bit apocryphal.
• I wanted to get a few extra Lighthouse points.

Turns out, it’s pretty easy to host the fonts yourself.

Download the fonts

I found this fantastic webfont helper tool⁵ that allows you to search for any Google font and download it. You can specify the font style, thickness, and browser support status. I’ve used it to download Schibsted Grotesk for text and JetBrains Mono for code snippets, targeting only modern browsers. You might want to pick Legacy Support if you need compatibility with older browsers and Historic Support for the really old ones.

After downloading, unzip the file and place the fonts in the /static/fonts folder in your root directory. If you’ve selected the Modern Browsers option, then the fonts will come in web-optimized woff2 format. Sweet!

Paste the CSS

While downloading the fonts, you may have already noticed that the helper tool also generates the CSS snippet required to link the fonts from the host storage. Here’s a sample:

/* schibsted-grotesk-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/schibsted-grotesk-v3-latin-regular.woff2')
    format('woff2');
}

/* schibsted-grotesk-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/schibsted-grotesk-v3-latin-italic.woff2')
    format('woff2');
}

/* truncated */

Copy the generated CSS and paste it somewhere in your header.css or assets/css/extended/header-override.css file if you’re overriding a theme. Edit the src attribute to reflect your font’s path:

@font-face {
    font-display: swap;
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400;
    /* url('../fonts/schibsted-grotesk-v3-latin-regular.woff2'); */
    src: url('/fonts/schibsted-grotesk-v3-latin-regular.woff2')
      format('woff2');
}

Here, you’ll need to change ../fonts/<rest> to /fonts/<rest>, and Hugo will take care of the rest. Notice there’s no /static prefix in the font’s path. Find this blog’s header-override.css⁶ if you’re facing any trouble while doing it. Serve your website locally and ensure that the fonts are being loaded and displayed correctly. Deploy!

Recent posts