@@ 0,0 1,102 @@
+---
+date: "2023-05-20T00:00:00+02:00"
+title: "Adding the Hyperlegible font to this blog"
+images:
+ - /media/2023-05-21-hyperlegible.jpg
+tags:
+ - tools
+ - frontend
+comments: true
+draft: false
+---
+
+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.
+
+<!--more-->
+
+## 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 [`<link preload>`](https://web.dev/preload-optional-fonts/). I dropped this in the
+`<head>` section of this website:
+
+```html
+<link rel="preload" href="/Atkinson-Hyperlegible-Bold-102a.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/Atkinson-Hyperlegible-Bold-102a.woff2" type="font/woff2">
+<!-- repeat for other variants of the font -->
+```
+
+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!
+
+---
+
+Hero image by <a href="https://pixabay.com/users/pexels-2286921/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1868070">Pexels</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=1868070">Pixabay</a>