0

I'm having trouble loading fonts with webpack v2 and file-loader. Using url-loader for any font-files everything works perfectly. However, I want to use file-loader so we can cache font files rather than storing all images and fonts in the bundled js file.

I am using webpack v2, css-modules, and postcss (and postcss-loader).

To try to make things simple I define @font-face in a global.pcss stylesheet, which is included in my main index.jsx file. (This was a temporary measure while debugging this issue. Normally all @font-face declarations would be in a separate file)

@font-face {
  font-family: 'ProximaNova-Rg';
  src: './ProximaNova-Rg';
  font-weight: normal;
  font-style: normlal;
}

:global html {
  font-family: 'ProximaNova-Rg', Comic Sans Ms;
}

In my index.jsx file, which is the app entry point for webpack, I import that global.pcss file

import './global/global.pcss'

All of the other styles in the global.pcss file are applied correctly.

My webpack config looks like this for fonts

{
  test: /\.(otf|eot|ttf|woff2?)(\?\S*)?$/,
  use: 'file-loader?name=fonts/[name]-[hash].[ext],
}

If I swap out file-loader above for url-loader that font loads correctly. Using file-loader, when I build the project I can confirm that file-loader creates the correctly named font file and moved it to my dist folder, but my project loads comic sans instead of Proxima Nova, eww.

I have no idea how to proceed with debugging this. Any help would be tremendously appreciated.

jasonleibowitz
  • 180
  • 9

1 Answers1

0

So I figured out what was going on here. It seems that the issue is file-loader + style-loader when importing assets (fonts/images) into a stylesheet AND enabling sourceMaps in style-loader.

There is a known bug with styleloader where you cannot use a relative publicPath in your webpack config with sourceMaps enabled, and instead must use an absolute path [see webpack/style-loader issue #55].

So TL;DR to solve this issue I changed the publicPath in my webpack output from '/' to 'http://0.0.0.0:8080/'.

jasonleibowitz
  • 180
  • 9