Load fonts with Webpack and font-face

After trying a lot of stuff the next loader made the work. Instead of file-loader, I used url-loader . You need url-loader installed.

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

With webpack 4 this is what solved the issue for me (diff):

       {         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 had to remove svg-loader and file-loader in favor of url-loader

My app.scss file looks like this:

$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 import the app.scss:

import './app.scss';

So, after the changes, my webpack config looks like this:

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'] }    ]  }};

I was having the same problem.In my case, the 'src' of the font became src="[object Module]".

Disabling esModule on webpack was the solution:

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

More info on it here.