Why this?

I did not plan on writing this post. One day I came across a website offering a free to use font for use on websites and on systems, like Windows.
It was the Atkinson Hyperlegible fonts from Braille Institue. Two things struck out to me. It was the font, and the design of the website. The font was so crisp and easy to read. The design reminded me heavily of the Neoliberalism library, which is a big plus, because I am a sucker for it (but not gotten around to use).

You can say it inspired me to add it to my website. As I read on about it, I learn that the font made with care to ensure that it has a high legibilty and readabiltiy for people with low vision. Big Bonus! Now I can keep this font on this website until I’m faaar into my retirement and don’t have to worry about not getting to read this mess I’m churning out. 🤗 Then I read further on. It comes with seven font weights (all the most common ones you can expect as a CSS user) and in a normal and Italic version. Bigger Bonus!

With this in mind, and the fact that I haven’t touched adding to or extending the defaults that Tailwind offers, I thought I might as well just write a post about it. So here goes!

Adding the Atkinson HyperLegible font to a Tailwind project

The process for adding the font was pretty straightforward, if not a bit tedious. Maybe there is a more dynamic, or more concise way to add these fonts to the project, but this was the way I did it. Let’s continue.

Finding the font

We first start by downloading the font. Navigate to the site for the Atkinson Hyperlegible fonts. Find and press the download button. You have to part with your email address and agreeing to an license agreement. Bit scary tbh, but I overcame my fears. You’re then presented with the choice of three different styles. They recommended the Next style, so I went and downloaded that.
From the zip file, find the folder called “professional use”. Here we find the Woff2 and TTF versions of the fonts, well suited formats for use on the web. We want to use both these versions, so we can have a fallback version. Copy paste these into your project folder. I put mine in ./static/fonts/.

Side note, The zip file also comes included with .otf versions. These versions I could install on my Windows system, so you maybe could use them in VS Code (I tried the Mono style of the Atkinson font for this (was too much of a change for me)).

Using the @font-face CSS-at-rule

Now you have the font files in your project. Now we to tell browser where to find them.
Find your root CSS file. In my Sveltekit project with Tailwind this is the app.css file, located at the root of the project.

/* app.css - base css file in my tailwind project */
@font-face {
	font-family: Atkinson-Next-WOFF2;
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url('/fonts/atkinson_hyperlegible_next/WOFF2/AtkinsonHyperlegibleNext-ExtraLight.woff2')
		format('woff2');
}

@font-face {
	font-family: Atkinson-Next-WOFF2;
	font-style: italic;
	font-weight: 200;
	font-display: swap;
	src: url('/fonts/atkinson_hyperlegible_next/WOFF2/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2')
		format('woff2');
}

@font-face {
	font-family: Atkinson-Next-TTF;
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/fonts/atkinson_hyperlegible_next/TTF/AtkinsonHyperlegibleNext-SemiBold.ttf') format('ttf');
}

Now to tell the browser where to find our font files, we use the @font-face CSS at-rule. In the code above, we see three of these rules in action.
We essentially map all the font files to their corresponding font-style and font-weight, and which font-family they should belong to.

I give the two different versions same name, but with different subfix (mapping to their file format). We can chose this name ourselves, and it is what it will be recognized as in other parts of our CSS.
As mentioned earlier, the font comes with 7 different weights, and 2 styles (normal and italic), for both formats! This is 28 different combinations, and therefore 28 different @font-face rules to add them! Have fun with that 🥲

You might have seen that the font-weights are described in English. These english font weights are recognized in CSS, so we could have written the font-weights like so: “font-weight: normal” instead of “font-weight:400”. However I am more comfortable using the number value, and it was easier to spot if was writing the right value when using the numbers. Also I’m not super steady on what all the english text values are. I used the table on the mdn web docs for font-weight page to map the font-files to the correct value.

The font-display property I was not that familiar with until writing this. It will let us decide how the browser will treat the rendering of the font while it is being downloaded and loaded in. The Tailwind docs used the swap method, so I went for that. As I understand it, the swap value will let the browser use a fallback font, until our new font is loaded in.

Now onto the next step!

Updating the tailwind config.

/* tailwind.config.js*/
/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*{html,js,svelte,ts}'],
	theme: {
		extend: {
			fontFamily: {
				atkinsonNext: ['Atkinson-Next-WOFF2', 'Atkinson-Next-TTF']
			}
		}
	},
	plugins: [require('@tailwindcss/typography')]
};

I decided I wanted to extend the default Tailwind theme with these new fonts. That way I could use these new fonts, while still having the Tailwind theme fonts as fallback fonts. The order of which we put the fonts in matter here, as it does in CSS. The first will be tried first, and if it cant be loaded in, the second value is treaded as a fallback value, and that will be tried to be loaded in.

I named the font atkinsonNext. This is what it will be recognized as in Tailwind syntax. So since we extended the fontFamily property, the font is recognized as font-atkinsonNext, like shown below.

<section class="font-atkinsonNext"></section>

Conclusion

And voila, that is it! It was not a big task, and tailwind makes it easy to use it around your project. One could consider extending their project with certain fonts for certain elements on the page. Having then the opportunity to name the font-families yourself, opens the opportunity to name them something like “Primary-font”, “Button-font” etc. Exciting!