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
Get started by adding a rule for fonts in webpack.config.js that can use at least .ttf files.
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.
We are ready to build!
Run the build command in one terminal.
Our font should be ready to display!
In a different terminal, run the start command, then refresh the preview on the right.