Lesson 20 - Setting up fonts

Course
Learn Eleventy From Scratch
Module
Asset Pipeline

Time to load our fonts from Google Fonts, locally.


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.

This certainly isn’t a crucial strategy—especially in the context of our website project—but I wanted to show you how useful Gulp is.

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

Adding a fonts task permalink

The process of this task is going to be:

  1. Grab the CSS that’s served up by Google Fonts.
  2. Grab the font assets that the CSS asks for.
  3. Put those assets in our dist folder.
  4. Generate some CSS and add it to the <head>.

Create a new file in your gulp-tasks folder called fonts.js and add the following to it:

Code language
JavaScript
const {dest, src} = require('gulp');
const GetGoogleFonts = require('get-google-fonts');

const fonts = async () => {
  // Setup of the library instance by setting where we want
  // the output to go. CSS is relative to output font directory
  const instance = new GetGoogleFonts({
    outputDir: './dist/fonts',
    cssFile: './fonts.css'
  });

  // Grabs fonts and CSS from google and puts in the dist folder
  const result = await instance.download(
    'https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,700;1,400&family=Red+Hat+Display:wght@400;900'
  );

  return result;
};

module.exports = fonts;

Remember in lesson 18 where we said that Gulp tasks can just return a Promise? We’re demonstrating that now because this task is a good ol’ asynchronous JavaScript function.

All we’re using is a handy library called get-google-fonts that does exactly what we described above, in the task breakdown.

The two fonts we’re using, Literata and Red Hat Display get pulled down locally, then fonts.css is generated.

The eagle-eyed amongst you will remember that we already added that to our <head> earlier, so now, all we need to do is wire it up to our gulpfile.

Before we do that, though. Let’s install our dependency. Open up your terminal in eleventy-from-scratch and run the following command:

Code language
bash
npm install get-google-fonts

Adding the task to the gulpfile permalink

Open up eleventy-from-scratch/gulpfile.js and on line 4, before the sass task, add the following:

Code language
JavaScript
const fonts = require('./gulp-tasks/fonts.js');

Then, in the parallel function on line 16, add fonts to the arguments. It should look like this:

Code language
JavaScript
exports.default = parallel(fonts, sass);

If that’s unclear, here’s a diff to compare with:

Code language
Diff - don’t copy
- exports.default = parallel(sass);
+ exports.default = parallel(fonts, sass);

Wrapping up permalink

This has been a nice, short lesson to follow the monster that was setting up Sass! That’s because that we’ve already done the hard work with Gulp, so all we’re doing now is filling in the gaps.

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


Comments

Next up: Lesson 21 - Setting up images

Time to wrap up the asset pipeline with some image optimisations.

Get started

Help! My version of this lesson isn’t working.

Don’t panic, you can download the working project here! Once they are downloaded: replace your project with these files and run npm install. You can read more information here.

Download project files

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me