Download fonts with Webpack and font

Question

I am trying to load a font into my CSS file using @ font-face, but the font never loads. This is my directory structure.

Directory structure

Then in webpack.config.js I have a loader to get the 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 invoke my CSS file in my index.js with:

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

Everything works, but the font never loads. Thanks.

Answer 1

After trying many things, the next bootloader did the job. Instead of the file loader, I used url-loader. You need url-loader.

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

Answer 2

Try changing the bootloader to

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

and add publicPath: 'build/' to your output key.