Webpack

To use Fontsource with Webpack, you’ll need to configure your Webpack project to handle font files and include Fontsource in the bundle. Follow the steps below to set it up.

Installation

1. Install the loaders

npm install css-loader file-loader

2. Configure the loaders

Modify webpack.config.js to include the following configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
      {
        test: /\.css$/i,
        use: ["css-loader"],
      },
    ],
  },
};

3. Import the font

Import the font in your entry file or component:

import "@fontsource-variable/open-sans/wght.css";
// You should be able to import other CSS files too
import "./styles.css"

// Your application code goes here