Fonts not showing up on development server

[carmouche]

Hello,

I realized while using this boilerplate that I couldn't get the fonts to work correctly when running the webpack dev server. The demo doesn't seem to be rendering the Open Sans font. I haven't checked if the fonts are working in the production build. I played around with the config and using different paths but couldn't get it working :( Maybe you can help!!

Thanks!

[ifranke]

Same issue. As previous posted a guess, the problem is the ''url(./path-to-hashed-font)" in Font-Face definition. Solved in first try by changing the loader for .woff to file-loader and force the output in webpack def to "http:/localhost:". Problem is the url-loader which creates relative urls and with the style-loader your resulting .css with your font-face url is in a blob where the font-file naturally is not included...

Really ugly hack for dev only.

So in short:

output: {
path: PATHS.build,
filename: 'js/bundle.js',
publicPath: 'http://localhost:3001/' // development only
},
...

module: {
loaders: [
...
{
test: /.woff2?(?v=[0-9].[0-9].[0-9])?$/,
//loader: 'url-loader?limit=10000&name=[name]-[hash].[ext]&mimetype=application/font-woff'
loader: 'file-loader'
},
...

Issue should be also solved, if you use extract-text-webpack-plugin as demonstrated for production build, but I do not know which issues you will have in hot reloading if you change this in dev...

[rflmyk]

+1