Load fonts with Webpack and font-face

Question

I'm trying to load a font in my CSS file using @font-face but the font never loads. This is my directory structure.

Then in webpack.config.js I have the loader to get fonts.

var path = require('path'); var webpack = require('webpack');  module.exports = {   devtool: 'eval',   entry: [     "./index.js"   ],   output: {     path: __dirname+"/build",     filename: "main.js"   },   plugins: [     new webpack.NoErrorsPlugin(),     new webpack.HotModuleReplacementPlugin(),     new webpack.NoErrorsPlugin()   ],   resolve: {     extensions: ['', '.js', '.jsx']   },   module: {       loaders: [           { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },           { test: /\.jsx?$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },           { test: /\.svg$/, loader: "raw" },           { test: /\.css$/, loader: "style-loader!css-loader" },           { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=src/css/[name].[ext]'}        ]   } }; 

Inside my CSS file I have this:

@font-face {   font-family: 'Darkenstone';   src: url('./Darkenstone.woff') format('woff'); }  body {   background-color: green;   font-size: 24px;   font-family: 'Darkenstone'; } 

Finally, I'm calling my CSS file in my index.js with:

import './src/css/master.css'; 

Everything works but de font never loads.

Answer 1

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

Answer 2

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