Adding the [Hyperlegible](https://brailleinstitute.org/freefont) font to this blog required me to flex a few frontend
muscles which I haven't used in a while. Here's how I did it.
**NOTE:** This concerns an older version of this website, back when it was published with Hugo. I still love Hyperlegible, though, and Vellum uses it by default. It's still not served through Google Fonts, either.
## But adding fonts is easy! You just...
No Google Fonts, please.
## Oh. But why?
I don't want to add external dependencies to this website. So far, I'm using [Commento](https://www.commento.io/) for
comments, and I even feel bad about _that_. I've been using [Plausible](https://plausible.io/) for analytics for a while, too, but I'm now
dropping it in favor of reading logs with [GoAccess](/blog/2023/05/goaccess-is-a-great-log-parsing-tool/).
More external dependencies almost always means more headaches. In my career, I've repeatedly had vendors die,
cancel a subscription, fail to process payment and delete my entire account (yes really), go down, or just decide
to blacklist a site because it _dared_ to have traffic. I'm self-hosting this because I don't want the headache;
if CloudFront shutters today, this blog will be redeployed to a new server before you can say "huh, that's weird".
And so, I don't want to introduce a dependency on an external property in general, and one owned by the Chocolate Factory
in particular.
## Adding fonts via CSS, 101
I realized something: it feels like I've always used Google Fonts, or at least something that managed exposing the fonts
for me, like Webpack or Rails asset pipeline. To make a long story short - here are the magic incantations to add
a font family to CSS:
```css
@font-face {
font-family: "hyperlegible";
font-weight: normal;
font-style: normal;
src: url("/Atkinson-Hyperlegible-Regular-102a.woff2") format('woff2');
font-display: block;
}
/* repeat for other variants of the font, four in total */
```
The only thing that could be non-obvious here is the [`font-display`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) setting.
The value of `block` should cause the browser to wait a short amount of time for the font to load, during which
an **invisible** font is used, and then the loaded font is used normally.
## But that will cause flash of invisible text!
Good old FOIT, we meet again. Not today, my friend: we come armed with [``](https://web.dev/preload-optional-fonts/). I dropped this in the
`` section of this website:
```html
```
The `rel="stylesheet"` usage is a [nasty hack](https://stackoverflow.com/questions/71406296/preload-fonts-cross-browser-compatibility)
for older browsers. It also helps for quieting down the warnings about unused fonts. Yes, they're just warnings,
but they bother me.
## Integrating with Tailwind
This site uses [Tailwind](/blog/2023/04/i-love-tailwind-css/) for its CSS. I found another reason to love it:
reconfiguring fonts is a cinch. Here's the relevant section of my config:
```js
theme: {
extend: {
fontFamily: {
'sans': ["hyperlegible", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
},
}
}
```
I could have just added a `hyperlegible` font family, but I decided to override the existing `sans` family. Just
in case something goes horribly wrong, the user agent will then have enough fonts to choose from and the site
should still look somewhat passable.
## Why [Hyperlegible](https://brailleinstitute.org/freefont)?
I discovered Hyperlegible in [NetNewsWire](https://netnewswire.com/) and fell in love with it. It definitely
improves my perceived readability of the news articles. Since I'm a blabbermouth, and my blog posts can easily
run into hundreds if not thousands of words, I want the best reading experience possible. Hence, the decision
to use it for this entire site.
What are your experiences with designing for readability? Feel free to share in the comments!