Learn

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.

Instructions

1.

Get started by adding a rule for fonts in webpack.config.js that can use at least .ttf files.

2.

In the CSS, define a font-face with a font-family named OpenSans which is linked to the URL ./OpenSans.ttf. Use this font-family in the CSS for the body element.

3.

We are ready to build!

Run the build command in one terminal.

4.

Our font should be ready to display!

In a different terminal, run the start command, then refresh the preview on the right.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?