In this exercise, we add fonts to our project.

The font rule is similar to the image rule:

{
  test: /\.ttf$/i,
  type: 'asset/resource'
}

The above rule would handle fonts in the .ttf format, but we might want to be able to use multiple font file types:

{
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  type: 'asset/resource'
}

The above rule would support .woff, .woff2, .eot, .ttf, and .otf font files.

Unlike the other resources we’ve seen so far, font files are imported in CSS, not in JavaScript. We use a font in our CSS like so:

@font-face {
  font-family: 'Roboto-Black';
  src: url('../Roboto-Black.ttf');
}

h1 {
  font-family: 'Roboto-Black';
}

The url is the location of the font file. We use font-family to define a name for our font that we can use later in the CSS.

When we build the project, we can see our fonts!

Let’s practice adding fonts to a Webpack project.