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

yarn add css-loader file-loader

pnpm add css-loader file-loader

bun add 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