{
  "$type": "site.standard.document",
  "canonicalUrl": "https://rednafi.com/misc/self-hosted-google-fonts-in-hugo/",
  "description": "Host Google Fonts locally in Hugo without CDN dependency. Download woff2 files, configure CSS, and improve performance while maintaining GDPR compliance.",
  "path": "/misc/self-hosted-google-fonts-in-hugo/",
  "publishedAt": "2023-09-14T00:00:00.000Z",
  "site": "at://did:plc:fgtm2c26vfcj74rfmeggbyqj/site.standard.publication/3mnl6f7ob462z",
  "tags": [
    "TIL",
    "Hugo",
    "Web"
  ],
  "textContent": "This [site] is built with [Hugo] and served via [GitHub Pages]. Recently, I decided to\nchange the font here to make things more consistent across different devices. However, I\ndidn't want to go with Google Fonts for a few reasons:\n\n- CDN is another dependency.\n- Hosting static assets on GitHub Pages has served me well.\n- [Google Fonts tracks users and violates GDPR] in Germany. Google Analytics does that too.\n  But since I'm using the latter anyway, this might come off a bit apocryphal.\n- I wanted to get a few extra Lighthouse points.\n\nTurns out, it's pretty easy to host the fonts yourself.\n\nDownload the fonts\n\nI found this fantastic [webfont helper tool] that allows you to search for any Google font\nand download it. You can specify the font style, thickness, and browser support status. I've\nused it to download Schibsted Grotesk for text and JetBrains Mono for code snippets,\ntargeting only modern browsers. You might want to pick _Legacy Support_ if you need\ncompatibility with older browsers and _Historic Support_ for the really old ones.\n\n![Google Webfonts Helper tool interface for downloading self-hosted fonts][image_1]\n\nAfter downloading, unzip the file and place the fonts in the /static/fonts folder in your\nroot directory. If you've selected the _Modern Browsers_ option, then the fonts will come in\nweb-optimized woff2 format. Sweet!\n\nPaste the CSS\n\nWhile downloading the fonts, you may have already noticed that the helper tool also\ngenerates the CSS snippet required to link the fonts from the host storage. Here's a sample:\n\nCopy the generated CSS and paste it somewhere in your header.css or\nassets/css/extended/header-override.css file if you're overriding a theme. Edit the src\nattribute to reflect your font's path:\n\nHere, you'll need to change ../fonts/<rest> to /fonts/<rest>, and Hugo will take care of\nthe rest. Notice there's no /static prefix in the font's path. Find this blog's\n[header-override.css] if you're facing any trouble while doing it. Serve your website\nlocally and ensure that the fonts are being loaded and displayed correctly. Deploy!\n\n\n\n\n\n[site]:\n    https://github.com/rednafi/rednafi.com/\n\n[hugo]:\n    https://gohugo.io/\n\n[gitHub pages]: https://pages.github.com/\n\n[google fonts tracks users and violates GDPR]:\n    https://rewis.io/urteile/urteil/lhm-20-01-2022-3-o-1749320/\n\n[webfont helper tool]:\n    https://gwfh.mranftl.com/fonts\n\n\n[header-override.css]:\n    https://github.com/rednafi/rednafi.com/blob/main/assets/css/extended/header-override.css\n\n[image_1]:\n    https://blob.rednafi.com/static/images/self_hosted_google_fonts_in_hugo/img_1.png",
  "title": "Self-hosted Google Fonts in Hugo"
}