Let's Build: HTML5 Development Server & Build Tool With Webpack - Web Fonts Support

Welcome everyone to the third part of this tutorial series. Just a quick recap up from last time; we added CSS support through webpack loaders like style-loader, css-loader, postcss-loader. We were also able to include TailwindCSS which makes it easier for us to build UI through its vast library of utility classes.

Today, we are going to supplement the CSS support that we implemented last time by adding support for web fonts.

Supporting Web Fonts

Adding fonts to a web page can be done in various ways; the easiest way to add web fonts is by going to google fonts, find the font you are looking to integrate into your webpage, and copy <link> tag to be attached on your web page’s <head> or grab the @import css syntax and place it on the top of your CSS file.

For today’s tutorial, what we’re going to do is to manually add web fonts with the help of Webpack’s file-loader. The reason why we’re doing this is because there are use cases where the font that you are using might not be available from websites like google fonts and the only option that you have is to manually add web fonts.

Installing and adding file-loader to Webpack configuration

To start updating our development server from last time, let us make a couple of changes to our Webpack configuration.

Go to your terminal, visit root of the project directory of the development server that we built last time and install a new Webpack loader called file-loader.

npm install --save-dev file-loader

Open your webpack.config.js file and add the following confiuration below that provides web fonts support.

  module: {
    rules: [
      //...
      {
        //This is a regex of file extensions for fonts
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader',
        ],
      },
      //...
    ]
  },

On this update, what file-loader does is it will allow us to reference these files later on inside our CSS files and it will enable Webpack to resolve these files and serve it to its destination directory.

You might be wondering, why there’s no destination directory configuration as of the moment. The reason why we are not defining any destination directory as of the moment is because when we run our development server, all the assets that are being served by webpack are stored in memory. It means that when we stop running our development server, the development files t hat we are seeing right now should disappear.

Don’t worry. On the future parts of this tutorial series, we’ll be working on the build process that produces the conventional HTML/CSS/JS files that we’re used to working with and that will require us to define the destination directory for the fonts later on.

Adding Lato Web Font

For this tutorial, I will be using Lato as an example. Here are the following steps to add Lato to our project.

Visit Google fonts page for Lato and look for the button Download family to download the font. After downloading, extract the contents of the zip file containing the fonts.
Visit Transfonter. Get Lato-Regular.ttf, Lato-Regular.ttf, Lato-Regular.ttf, and Lato-Regular.ttf from the extracted zip file you downloaded from Google fonts earlier, upload them to Transfonter and click Convert. It should look like this:

Note: I use transfonter to convert .ttf to web safe fonts.

Download the zip file from Transfonter and extract it.
Create fonts directory from the root of this project inside /src/assets/css/fonts.

mkdir -p ./src/assets/css/fonts

Copy all your fonts from the extracted zip file that you downloaded from Transfonter and copy all the .woff and .woff2 files that you will see there inside the fonts directory you created from the last step.

Your directory structure should now look like this:

Create global.css inside ./src/assets/css and add these CSS that declares the fonts that we downloaded from Transfonter.

@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato-Italic.woff2') format('woff2'),
      url('./fonts/Lato-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato-Bold.woff2') format('woff2'),
      url('./fonts/Lato-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato-BoldItalic.woff2') format('woff2'),
      url('./fonts/Lato-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('./fonts/Lato-Regular.woff2') format('woff2'),
      url('./fonts/Lato-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Open index.js inside ./src/pages/index and add the following line of code to add global.css as a dependency of our home page.

// Add this line below
import '../../assets/css/global.css'
import './index.css'

What’s happening here is, everytime the user loads the homepage, the CSS files that webpack will include in the bundle will be global.css and index.css. One advantage of this convention is later on we can define which CSS files only gets loaded for specific pages.

Open and update mixins.css inside ./src/assets/css/mixins.css with the following code:

@define-mixin set-font-family {
  /* We are now calling Lato as our webpage's main font */
  font-family: Lato, Arial, Helvetica, sans-serif;
}

Open and update index.html inside ./src/pages/index/index.html with the following code:

<!-- HTML before this line ... -->
<h1 class="greeting">
  Hello World! <strong>This is the home page!</strong>
</h1>
<!-- HTML after this line ... -->

Go back to your terminal and run the development server.

npm run start

Visit your browser at http://localhost:3000 and you should see the that the page now uses Lato as its main font.

Congratulations, we successfully added font support to our development server. 🎉

Conclusion

That wraps up this part 3 of this series. I hope you learned something today about how to configure our development server to serve fonts with the help of file-loader. I encourage you to investigate and understand everything that’s happening with these changes that we made and adjust this configuration to what suits your development style. For the complete source code of this tutorial, please visit this github link.

Next week, I will be sharing to you how to import images using our evelopment server.

Have a blessed week to you!

Hi! If you have any questions, suggestions, corrections, or constructive feedback about this post, please let me know. I will greatly appreciate it!💯

Published 8 Feb 2021

Follower of Christ ✝ & Front-end Engineer from the Philippines 🇵🇭