As stated in Webpack's Documentation, it is necessary to make adjustments to your webpack.config.js file in order to handle font files effectively. This involves adding a specific loader for font files, as shown below:

{
   test: /\.(woff|woff2|eot|ttf|otf)$/i,
   type: 'asset/resource',
  }

This configuration will ensure that webpack can process various types of font files. The final version of the webpack.config.js file will resemble the following structure.

const path = require('path');
module.exports = {
       entry: './src/index.js',
       output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'dist'),
       },
       module: {
         rules: [
           {
             test: /\.css$/i,
             use: ['style-loader', 'css-loader'],
           },
           {
             test: /\.(png|svg|jpg|jpeg|gif)$/i,
             type: 'asset/resource',
           },
          {
            test: /\.(woff|woff2|eot|ttf|otf)$/i,
            type: 'asset/resource',
          },
         ],
       },
     };

After setting up the loader and importing the fonts into your entry file (e.g. ./src/index.js), you can easily utilize them by declaring an @font-face. Just like images, webpack will recognize the local url(...) directive associated with fonts.

In order to resolve the issue with webpack 4, I made the following adjustments:

       {
         test: /\.svg$/,
         use: ['svg-loader']
       },
       {
         test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
         use: ['file-loader']
       }
       { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: ['url-loader?limit=100000'] }

I opted to replace svg-loader and file-loader with url-loader

This is how my app.scss file appears now:

$fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome';

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

And in my app.js, I include the app.scss:

import './app.scss';

As a result of these modifications, this is the updated webpack configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpackConfig = require('./webpack.config');

module.exports = {
  entry: {
    app: './client/app/app.js'
  },
  devtool: 'source-map',
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Development',
      template: 'client/index.html'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: ['url-loader?limit=100000'] }
    ]
  }
};

After upgrading from Webpack 4.x.x to the latest version 5.52.1, I encountered some issues with my font faces.

When I looked at the content of my exported files like .woff, .woff2, and .ttf, it appeared something like this:

export default __webpack_public_path__ + "glyphicons-halflings-regular.woff2";

To resolve the problem, I decided to completely remove the previous file-loader configuration. It seemed that the files were being processed multiple times, leading to errors.

Before:

...
module: {
    rules: [
        {
            test: /\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
            use: {
                loader: 'file-loader',
                options: { 
                    name: '[name].[ext]',
                    useRelativePath: true
                }
            }
        },
        {
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: { url: false }
                }
            ]
        }
    ]
}
...

After:

...
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: { url: false }
                }
            ]
        }
    ]
}
...

For more details, visit https://webpack.js.org/guides/asset-modules/

After some experimentation, I finally found a solution that worked for me when using regular CSS on a Node.js/webpack build. I wanted to share it here in case it can help others facing the same issue in the future.

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
        },
      },
    },
    {
      test: /\.html$/,
      exclude: /node_modules/,
      use: "html-loader",
    },
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      type: "asset/resource",
      generator: {
        filename: "assets/[name][ext][query]",
      },
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: "asset/resource",
      generator: {
        filename: "fonts/[name][ext][query]",
      },
    },
  ],
},

To make this setup work, don't forget to add the necessary import statements in your .js file:

// Example of importing images
import "../../assets/icon-16.png";
import "../../assets/icon-32.png";

// Example of importing fonts
import "../../Fonts/opensans-regular-webfont.eot";
import "../../Fonts/opensans-regular-webfont.svg";

Finally, update your .css file to reference the newly created dist/fonts directory:

@font-face {
  font-family: 'open_sansregular';
  src: url('fonts/opensans-regular-webfont.eot');
  /* Additional font sources */
}

html,
body {
    font-family: open_sansregular !important;
}

Don't forget to build the project after making these changes.

Encountered a similar issue myself. In this scenario, the font's 'src' attribute was displaying src="[object Module]".

The fix involved disabling esModule in webpack:

{
  test: /\.(png|jpe?g|gif|svg|ttf|woff|otf)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[contenthash].[ext]',
        outputPath: 'static/img',
        esModule: false // <- this line
      }
    }
  ]
}

For more details, check out this link.

To configure webpack in my webpack.config.ts file, I had to make sure of two key things: Webpack was set up to handle font files using the following code snippet:

module: {
  rules: [
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
    }
  ]
}

Additionally, I needed to include css-loader for webpack to interpret @font-face and url() declarations, along with style-loader to inject the CSS into the Document Object Model (DOM).

module: {
  rules: [
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: 'asset/resource',
    },
    {
      test: /\.css$/i,
      use: [
        'style-loader',
        'css-loader'
      ]
    },
  ]
}

Following this setup, I edited my index.css file located under src folder (mine was named Exo) as follows:

@font-face {
  font-family: "Exo";
  src: local(Exo), // Also used in css
    url('./fonts/exo-v20-latin/exo-v20-latin-regular.woff2') format('woff2'),
    url('./fonts/exo-v20-latin/exo-v20-latin-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

 html, body {
  font-family: Arial, Helvetica, sans-serif;
 }

I recommend using woff formats as they are compatible with most modern web browsers.

Don't forget to import your CSS file into your main app index.js file:

import './index.css';

Finally, remember to run a build command to ensure these files are included in your build/dist/public directory (or any custom build folder you've specified).

npm run build

OR

yarn run build

This approach worked well for me. Hopefully, it proves helpful for you too!

Consider updating the loader:

{test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=[name].[ext]'}

Additionally, include publicPath: 'build/' in your output configuration.

By upgrading the webpack version to 4.42.0 from 4.20.2, I successfully resolved the issue of my code not loading the desired font.

const URL_LOADER_LIMIT = 8192

module.exports = () => ({
  module: {
    rules: [
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
              limit: URL_LOADER_LIMIT
            }
          }
        ]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
              limit: URL_LOADER_LIMIT,
              mimetype: 'application/font-woff'
            }
          }
        ]
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
              limit: URL_LOADER_LIMIT,
              mimetype: 'application/octet-stream'
            }
          }
        ]
      },
      {
        test: /\.mp3$/,
        use: ['file-loader']
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'images/',
              name: '[name].[ext]',
              limit: URL_LOADER_LIMIT,
              mimetype: 'image/svg+xml'
            }
          }
        ]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              outputPath: 'images/',
              name: '[name].[ext]',
              limit: URL_LOADER_LIMIT
            }
          }
        ]
      }
    ]
  }
})