Now, we will examine fonts in the context of assets. The file and URL loaders will take any file you load through them and output it to your build directory. This means we can use them for any kind of file, including fonts.

We will begin by updating the Webpack configuration JavaScript file, which is needed to handle fonts, as follows:

1. Ensure the update of the configuration file is made. We are updating our usual webpack.config.js configuration file here, but you will notice toward the end that some font types, such as .woff, .woff2, .eot, .ttf, and .otf, have been added, as illustrated in the following code block: 

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
       {
         test: /.(woff|woff2|eot|ttf|otf)$/,
         use: [
           'file-loader'
         ]
       }
      ]
    }
  };

This configuration allows Webpack's file-loader to incorporate the font type, but we still have to add some font files to our project.

2. We can now perform the essential task of adding the font to the source directory. The following code block illustrates a file structure, indicating where the new font files can be added:

  webpack5-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
    |- sample-font.woff
    |- sample-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

Note the src directory and the sample-font.woff and sample-font.woff2 files. These two files should be replaced with any font files you choose. The Web Open Font (WOFF) format is generally recommended for use with Webpack projects.

Fonts can be incorporated in the styling of your project by using the @font-face declaration. The local URL directive will be found by Webpack the same way it handles images.

3. Update the style sheet using the src/style.css file to include the sample font on our home page. This is done with the use of a font declaration at the top of the code block and a class definition below that, as shown in the following code block:

  @font-face {
    font-family: 'SampleFont';
    src:  url('./sample-font.woff2') format('woff2'),
          url('./sample-font.woff') format('woff');
    font-weight: 600;
    font-style: normal;
  }

  .hello {
    color: blue;
    font-family: 'SampleFont';
    background: url('./icon.png');
  }

Note that you must change the 'SampleFont' text to one corresponding to your chosen font file. The previous code shows the loading of the font via CSS and the setting of custom values such as font-weight and font-style. The CSS code then uses the .hello class to assign that font to any prospective HTML element. Note that we have already prepared our index.html file for this in the two previous tutorials, Loading CSS files and Loading images.

4. Now, run a npm build in development mode using the command-line utility as per usual, like this:

npm run build

...
                                 Asset      Size  Chunks                    Chunk Names
5439466351d432b73fdb518c6ae9654a.woff2  19.5 KiB          [emitted]
 387c65cc923ad19790469cfb5b7cb583.woff  23.4 KiB          [emitted]
  da4574bb234ddc4bb47cbe1ca4b20303.png  3.01 MiB          [emitted]  [big]
bundle.js                                 77 KiB       0  [emitted]         main
Entrypoint main = bundle.js
...

Open up index.html again and see whether the Hello Webpack sample text we are using has changed to the new font. If all is well, you should see the changes.

That should serve as a simple tutorial to understand font management. The next section will cover data management of files such as Extensible Markup Language (XML) and JavaScript Object Notation (JSON) files.