Loading Fonts with webpack

If you're currently using webpack to manage your CSS, importing font files won't work without a little bit of extra configuration.

I've spent more than a few hours fiddling around with webpack and it's various font loading options, and even with the available documentation, getting this to work correctly while still maintaining a basic understanding of what's going is a bit of a headache. Hopefully this post will fix that.

In this tutorial, I'll show you how to get fonts working with webpack and explain the fine details along the way to better your understanding of webpack as a whole. We're going to start with a basic webpack config that compiles SCSS down to CSS. Download the repo, install its dependencies (use yarn or npm install), and let's get started.

Adding file-loader

Without the necessary configuration in place, trying to load a font-face with webpack is going to throw an error that says something along the lines of:

You may need an appropriate loader to handle this file type.

Ya don't say webpack?! Let's fix this by adding the appropriate loader as recommended by our terminal errors.

1. Installation

The first thing we have to do is install an external webpack loader called file-loader. file-loader will allow us to import file-based assets into our webpack managed JS and CSS files. Some examples of files we may want to import include images (.jpg and .png) and font files (.woff2 and .eot), we just need to make sure we tell webpack to run file-loader whenever it comes across one of these files.

Install file-loader by running one of the following commands:

npm install file-loader --save-dev

2. Add to webpack.config.js

After we've downloaded the file-loader package, we then need to integrate it within our webpack.config.js. To do just that, add the highlighted lines of code to your loaders array:

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },
  watch: true
}

This will tell webpack to search for any fonts being pulled in through one of our webpack entry points, in this case, our entry point is a file in a src directory called app.js.

If webpack finds any font files being referenced inside of any CSS files being pulled into app.js, it'll duplicate the font files, and place them into whatever directory we specify using outputPath. This is required for our fonts to be referenced correctly within our compiled down version of our CSS located in /dist. In this instance, webpack and file-loader will duplicate all fonts to a folder called fonts/ within our dist/ directory since the output path of the fileLoader is relative to the path specified in the output.path property of the overall webpack config.

Restart webpack to ensure that these new changes take effect.

Import Font Awesome

All we need to do now is import some fonts into an .scss file and import that .scss file into our app's entry point: app.js. To get quick access to a variety of font files, we're going to be downloading Font Awesome, a font package that contains plenty of font extensions such as .woff, .woff2, .ttf, and so forth.

First, download Font Awesome by running the following in terminal and restarting webpack:

npm install font-awesome --save

If your webpack config is watching for CSS instead of SCSS, you'll be able to load all of Font Awesome's fonts by importing its CSS file directly into app.js like so:

import 'font-awesome/css/font-awesome.css'

However, if you're following along with the tutorial repo, webpack will be watching for SCSS files instead CSS files, returning an error in the terminal:

"You need an appropriate loader to handle this file type."

Sound familiar?

This occurs since we haven't set up a way for webpack to watch for .css files—our current config is only watching for .scss files. As a result, we're not going make any alterations our webpack config, rather, we're going to import Font Awesome's CSS file into an .scss file as mentioned earlier.

Load fonts through SCSS

To import Font Awesome into an SCSS file, first we'll need to create one. Create a file called style.scss and place it inside of your src directory. Once there, import this newly created file into your app.js entry point like so:

import './style.scss'

Any SCSS written inside of style.scss should now be compiled down to CSS as expected, but as I alluded to, to get Font Awesome working, we need to import its CSS into our newly created style.scss file. We can do so with the following line of code:

@import '~font-awesome/css/font-awesome.css';

The ~ here means that rather than trying to locate a file relative to our current file's location, locate a file relative to our project's node_modules directory instead. And with that, you webpack should compile without errors, Font Awesome will be bundled into your CSS, and you'll be able to use its fonts within your HTML and CSS files as normal.

Load external fonts from Google

To wrap things up, let's go ahead and import some Google Fonts using an external URL.

Now that file-loader is integrated into our config, to load Google Fonts, all we need to do is import the desired font's URL into our style.scss file like we did with Font Awesome. The import statement should look like this:

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:100,300,400');

That's all it takes. With that, we can now reference Google font families directly within our SCSS without webpack throwing any errors:

font-family: 'Roboto', sans-serif;

Our finished files should look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Loading Fonts with webpack - Chris Courses</title>
  </head>
  <body>
    <h1>Loading Fonts with webpack - Chris Courses</h1>
    <i class="fa fa-check fa-lg"></i>
    <script type="text/javascript" src="build.js"></script>
  </body>
</html>

@import '~font-awesome/css/font-awesome.css';
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:100,300,400');

h1 {
  font-family: 'Roboto', sans-serif;
}

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      }
    ]
  },
  watch: true
}

And that's a wrap folks, you should now be able to load fonts into your CSS and JS files without webpack throwing any errors.

To summarize, to avoid any font related errors with webpack, you need to:

1. Download file-loader
2. Add it to your webpack config
3. Import whatever fonts you wish to use into your CSS or SCSS files

If you have some local font files of your own, place them in a font directory within src and reference them within .style.scss using @font-face as you normally would—webpack will see that you're referencing a font file and run it through the file-loader like it did with Font Awesome and Google Fonts.

If you'd like a completed version of the project, clone up the completed repo, install its dependencies, and run npm run start for font loading goodness.

Hopefully this tutorial was able to help you, for more dev content and tips, be sure to follow me on Twitter at @christopher4lis.