Web Fonts

If you've ever used an older or lower spec device, or had a slow connection on a public wifi network, you may have noticed the fonts on a web page get loaded after the content and layout. Most of the time this is virtually unnoticable, but once you've seen it, as with most things traumatic, it is hard to unsee it. But there are a few steps we can take to mitigate this from happening.

I feel like fonts are something that get overlooked when learning web development, and also when teaching it. Budding web developers tend to be taught how to import a chosen font from a CDN service such as google fonts, and that tends to be the extent of fonts within the subject. I prefer to avoid external services wherever I can, as even the most reliable service can fail on occasion, which I've learned from experience.

Local Font Stack

Typically, I prefer to go with system fonts whenever I can. This website, for example, only sets fonts to sans-serif or monospace, and will just let the browser choose it's favourite if the user hasn't set their own preferences. Prism JS, which I use for my code snippets, sets a sensible font stack, and looks for fonts installed locally on the users machine - it allows for some more thoughtful design without relying on http requests for fonts.

font-family: 
  Consolas,
  Monaco,
  'Andale Mono',
  'Ubuntu Mono',
  monospace;

If a local font stack is the way you want to go, then I highly suggest taking a look at Simple CSS, a simple CSS framework that is intended as a starting point rather than a solution. I haven't used Simple CSS in any guides yet that are big enough to warrant including the entire (albeit, very small) file, but it is still quite handy to even just cherry pick from for smaller guides. For example it has a very sensible local font stack.

:root {
  /* Set sans-serif & mono fonts */
  --sans-font: 
    -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
    "Helvetica Neue", sans-serif;
  --mono-font: 
    Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}

Self Hosting Fonts

Sometimes you need a specific font, and don't want to rely on a local stack. For example, I work in a Youth Centre, and we often use the OpenDyslexic font, which is designed to be easier to read for those with dyslexia - I am pleased to see this font being adopted elsewhere, such as the Rakuten Kobo eBook readers.

Every external service that your website connects to is a potential point for things to break. Fonts is not something I feel that should be fetched from elsewhere on the web. Furthermore, and this one is kinda big: in the EU at least, it's considered a breach of GDPR to import fonts from Google! Thankfully, Google Fonts are open source, and can be downloaded for self hosting.

Fonts typically download as TTF format files. TTF, or True Type Fonts, are typically what we would use to install a font on an operating system. They will include binary information required to render the fonts. While we can use TTF's in a web environment, they are bloated with unecessary data that a web browser doesn't need in order to render the fonts. For web fonts, we have WOFF and WOFF2 formats (the Web Open Font Format). The files are much smaller, are compressed, and only include necessary information. Good practise would be to use WOFF2, and include WOFF as a fallback. WOFF2 is currently well supported across all browsers (except some older versions of safari), so I personally don't worry about WOFF, but with the insight gained here, it shouldn't be too difficult to figure out how to support WOFF in your own guides.

Safari is the new Internet Explorer

There are online font converters, but we are developers and we work in the terminal. Google offer a WOFF2 converter that is easy to install and simple to use. After folling the install instructions, you can move the binaries to have global access to them within your system - just remember to restart your desktop session before calling them globally.

cp woff2_compress woff2_decompress ~/.local/bin/

After converting your fonts to WOFF2, you can now include the files in your project.

root/
├── assets/
|   └── fonts/
|       └── OpenDyslexic3-Regular.woff2
└── index.html

In your CSS file, you simply need to create a @font-face rule to pull the font into your stylesheet. After that, you will be able to use the font with whatever you named it as in the font-family attribute of the @font-face rule.

@font-face {
  font-family: 'OpenDyslexic';
  src: url('/assets/fonts/OpenDyslexic3-Regular.woff2') format('woff2');
}

body {
  font-family: 'OpenDyslexic';
}

Preloading Fonts

Wether you're fetching or self hosting a font, if it's not installed locally on the machine that is viewing your web page, it will need to be fetched. You would assume, that if it is within the stylesheet, the font would be applied when the styling rules are applied to the document. For reasons that I am not smart enough to understand, this is not the case. I haven't looked into it too much, but the web browser doesn't consider fonts a high priority, so it doesn't rush on this particular request. Even if we are self-hosting, the font still needs to be called from it's url, and this can cause some clumsy looking loading on weaker machines and slow internet connections.

To mitigate this, we can simply preload the fonts within the html file. This will prevent the web browser from rendering any text to the DOM until the font becomes available. This means the content in the page takes a (very brief) moment longer to load, but it also means that it doesn't load in serif before changing to the correct font. Before your CSS, simply include another link element with the relationship, or rel, attribute set to preload. We also need to set the as and type attributes, and also include the crossorigin attribute.

<link rel="preload" href="/assets/fonts/OpenDyslexic3-Regular.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="/assets/styles/style.css">