# Webpack [#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 [#installation]

### 1. Install the loaders [#1-install-the-loaders]

```sh
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 [#2-configure-the-loaders]

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

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

### 3. Import the font [#3-import-the-font]

Import the font in your entry file or component:

```js
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
```