Lesson 19: Setting up fonts

There’s a real performance benefit to serving fonts locally, especially in terms of latency and cache control, so that’s what we’re going to do in this lesson.

In this lesson, we’re going to grab some Google Fonts and pull them down to serve locally.

Downloading our fonts

The two fonts we’re using, Literata and Red Hat Display, are available on Google Fonts. We'll use the google-webfonts-helper tool to pull these down locally and create our fonts.css file.

The eagle-eyed amongst you will remember that we already added that to our <head> earlier, so now, all we need to do is download the font assets and create the contents of fonts.css.

Starting with Literata, visit https://gwfh.mranftl.com/fonts/literata. We'll want to make sure the latin charset is enabled and is the only charset enabled. Select the regular, italic, and 700 styles, which we will be using.

Under 3. Copy CSS, keep Modern Browsers toggled, and customize the folder prefix textbox to /fonts/. This should result in CSS similar to the following:

/* literata-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Literata';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/literata-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* literata-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Literata';
	font-style: italic;
	font-weight: 400;
	src: url('/fonts/literata-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* literata-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Literata';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/literata-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

Add this to a new file called eleventy-from-scratch/src/fonts/fonts.css.

Finally, under 4. Download files, download the .zip file of font assets.

Next, we'll get our font assets for Red Hat Display at https://gwfh.mranftl.com/fonts/red-hat-display and repeat the steps. Again, start by making sure the latin charset is enabled and is the only charset enabled. This time, select only the regular amd 900 styles.

Under 3. Copy CSS, keep Modern Browsers toggled, and customize the folder prefix textbox to /fonts/. This should result in CSS similar to the following:

/* red-hat-display-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Red Hat Display';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/red-hat-display-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* red-hat-display-900 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Red Hat Display';
	font-style: normal;
	font-weight: 900;
	src: url('/fonts/red-hat-display-v21-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

Copy and append this to the eleventy-from-scratch/src/fonts/fonts.css file.

And lastly, under 4. Download files, again download the .zip file of font assets.

With our two zips from the two fonts, unzip the contents of each into the eleventy-from-scratch/src/fonts folder, next to our new fonts.css.

At this point, the folder structure of eleventy-from-scratch/src/fonts should look like this:

fonts/
├── fonts.css
├── literata-v40-latin-700.woff2
├── literata-v40-latin-italic.woff2
├── literata-v40-latin-regular.woff2
├── red-hat-display-v21-latin-900.woff2
└── red-hat-display-v21-latin-regular.woff2

NOTE

On top of serving fonts locally, you can go above and beyond by using content-based font subsetting to only serve the font files containing the glyphs used on the website. We won't go over this here since it is complicated and unnecessary in the context of this tutorial, but feel free to read more about it or try implementing it yourself!

Copying the assets

Lastly, we'll need to use passthrough copy from lesson 5 again to copy our font files to the output directory.

On around line 21, following our previous call to eleventyConfig.addPassthroughCopy for the images, add:

eleventyConfig.addPassthroughCopy('src/fonts');

That's it! Our font CSS and font files themselves are now copied into the output directory.

Wrapping up

This has been a nice, short(er) lesson to follow the monster that was setting up Sass!

Let’s wrap up this module in the next lesson, where we’re going to optimize our images.