Hosting fonts locally on the website

Privacy matters, and everyone should care about it.

I wanted to get rid of the few things from my website which don’t respect user’s privacy, which try to track users. I didn’t want to get in a trap of all or nothing, and just wanted to start making the changes. So, I decided to tackle an easy problem first. That is to stop using fonts.google.com and host the fonts local to the website server (self-host). There are other things such as Google Analytics, Disqus on my site. I’m working on removing / replacing those, but one thing at a time, step by step. Let’s talk about fonts now.

What’s wrong in using fonts.google.com

Google Fonts is a nice service which lists different free (libre) fonts. They provide an easy way to just use a link and load the fonts for your website. The link is basically a CSS file which has links to different font files supported by browsers (web fonts).

The domain they use for downloading the font files uses cookies which might be used to track users. Also, it is better to stay away from Google as much as you can. The Hugo theme I use loads two fonts using Google Fonts.

Another issue is that the CSS being delivered by Google Fonts has some extra font files, which you might not need. These can be font files with extra glyphs like cyrillic alphabets.

Privacy Badger blocking cookies for the fonts.gstatic.com domain.

Getting the required fonts

After a quick search about self-hosting fonts, I came across the post How & Why I Host Google Fonts Locally by Adam Wolfson. This explains a lot more details about web fonts, browsers, other tips related to self-hosting the fonts.

The URL used by my website to load the fonts was this:

https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700|PT+Sans:400

The family query parameter has a list of fonts to load, these are:

• PT Serif of style 400, 400italic and 700.
• PT Sans of style 400.

As suggested by Adam, I used the google-webfonts-helper tool to download the fonts which I’m using on my website.

After selecting a font, google-webfonts-helper shows all the styles, character sets supported by the font. It also gives a CSS snippet to load those fonts.

I used the ‘Modern Browsers’ option from ‘Copy CSS’ section. It gave the following CSS:

/* pt-sans-regular - latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/fonts/pt-sans-v12-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/fonts/pt-sans-v12-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

I wanted to load the minimum number of font files, so I removed the woff font format. I’m fine if my site does not look good on legacy browser versions. If someone is actually using such an old¹ browser version (seriously?!), they should go and update their browser first.

The local('') is there for IE6-8 and not required on modern browsers, so I removed that as well.

You can take a look at the final fonts CSS file here: https://geeksocket.in/css/fonts.css.

Making changes to the theme

I copied the font files downloaded from google-webfonts-helper to static/fonts/ directory of the site’s Hugo source. Now, it was time to disable Google Fonts and load the self-hosted files. The theme I use lanyon-hugo, did not have any way to disable default fonts and load custom CSS files. I made the following changes to the theme and sent a pull request.

--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -16,7 +16,12 @@
   <link rel="stylesheet" href="/css/lanyon.css">
+  {{- if not .Site.Params.disableFonts }}
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700|PT+Sans:400">
+  {{- end }}
+  {{- range .Site.Params.customCSS }}
+  <link rel="stylesheet" href="{{ . | relURL }}">
+  {{- end }}

With all these changes, my website is now free from external fonts.