CSS: Using Local Web Fonts with Webpack

In this article, we’ll introduce how to use local web fonts with Webpack to optimize web page loading speed and font rendering. In front-end development, using custom fonts can provide a better design and user experience, but improperly loading and using fonts can lead to slow page loading and font display errors. Webpack is a popular front-end build tool that helps us better manage and load font files.

Read more: CSS Tutorial

1. Configure webpack

Before using webpack to load local web fonts, we need to add the corresponding loaders and plugins to the webpack configuration file. We can use url-loader or file-loader to load the font file, and use html-webpack-plugin to automatically update the link in the HTML file.

The following is a simple webpack configuration example:

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
entry: './src/index.js', 
output: { 
filename: 'bundle.js', 
path: path.resolve(__dirname, 'dist'), 
}, 
module: { 
rules: [ 
{ 
test: /.(woff|woff2|eot|ttf|otf)$/, 
use: [ 
{ 
loader: 'url-loader', 
options: { 
limit: 8192, 
name: 'fonts/[name].[ext]', 
}, 
}, 
], 
}, 
], 
}, 
plugins: [ 
new HtmlWebpackPlugin({ 
template: './src/index.html', 
}), ], 
}; 

In the above configuration, we first import path and html-webpack-plugin, then configure the paths for the entry and output files. Next, we add a font loader to module.rules and set the loader’s options. Finally, we use html-webpack-plugin to specify the HTML template file.

2. Downloading Font Files

Next, we need to download the required font files and place them in the appropriate directory in our project. Generally, we place font files in the src/fonts directory. If you need to download custom font files, you can search for free font resources online.

The following is a sample directory structure for a font file:

- src
- fonts
- MyFont.woff
- MyFont.woff2
- MyFont.ttf
- MyFont.eot

3. Referencing Fonts in CSS

After downloading the font files and placing them in the correct directory, we can reference them in our CSS files using the @font-face rule. In this rule, we need to specify the font name, the path to the font file, and the font file format.

Here is an example of referencing a font file:

@font-face { 
font-family: 'MyFont'; src: url('../fonts/MyFont.woff2') format('woff2'),
url('../fonts/MyFont.woff') format('woff'),
url('../fonts/MyFont.ttf') format('truetype'),
url('../fonts/MyFont.eot') format('embedded-opentype');
}

In the above example, we define a font named “MyFont” using the @font-face rule and specify the paths to the font files in different formats. If a browser doesn’t support one format, it will try to load the next one.

4. Using Fonts

With the font files and reference rules, we can use these custom fonts in our pages. In CSS, we can specify the font name using the font-family property.

The following is an example using a custom font file:

body {
font-family: 'MyFont', sans-serif;
}

h1 {
font-family: 'MyFont', sans-serif;
font-weight: normal;
}

In the above example, we use the font-family property to apply the “MyFont” font to the body text and headings of the entire page. Note that if a font name contains spaces or special characters, it must be enclosed in quotes.

5. Build and Bundle

After completing the above configuration and code, we can use webpack to build and bundle our application. Run the following command to build the project:

$ webpack

Once completed, webpack will generate a bundled bundle.js file based on the options in the configuration file and copy the font files to the dist/fonts directory. At this point, we can deploy the files in the dist directory to the server.

Summary

By using webpack, we can easily load local web fonts and optimize web page loading speed and font rendering. First, we need to add the corresponding loaders and plugins to the webpack configuration file. Then, download the required font files and place them in the correct directory. Next, we can reference these font files in CSS using the @font-face rule. Finally, use the font-family attribute to specify the font to use.

I hope this article helps you understand how to use local web fonts with webpack!