How to use @font-face with webpack's css-loader?

Question

I'm trying to import some font (like Roboto) in my project using webpack but none of them works.

My file structure looks like this:

+-src---fonts-+-Roboto---Roboto.ttf
|             |
|             +-fonts.css
|
+-webpack.config.js

My fonts.css file:

@font-face {
    font-family: 'Roboto';
    src: url(/Roboto/Roboto.ttf) format('truetype');
}

My webpack.config.js looks like this:

//...
loaders: [
  {
    test: /\.css/,
    loaders: [
      'style-loader',
      `css-loader?${JSON.stringify({
        sourceMap: isDebug,
        localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
        modules: true,
        minimize: !isDebug,
        importLoaders: 1
      })}`,
      'postcss-loader',
    ],
  },
  {
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
    loader: 'url-loader',
  },
  {
    test: /\.(wav|mp3|eot|ttf)$/,
    loader: 'file-loader',
  },
],
//...

When i run webpack, no error shows up. But the Roboto font was not loaded (texts are still of default font-family, though i've set font-family: 'Roboto' to the text element).

What I've tried:

Change the paths in .css files' url()s to relative path: errors came out:

ERROR in ./~/css-loader?{"sourceMap":true,"localIdentName":[name][local][hash:base64:3]","modules":true,"minimize":false,"importLoaders": 1}!./~/postcss-loader!./fonts/fonts.css Module not found: Error: Cannot resolve module 'Roboto/Roboto.ttf' in /Users/EnixCoda/projectName/fonts @ ./~/css-loader?{"sourceMap":true,"localIdentName":"[name][local][hash:base64:3]","modules":true,"minimize":false,"importLoaders":1}!./~/postcss-loader!./fonts/fonts.css 6:135-163

Could anyone help me?

Phil Gibbins Phil Gibbins · Accepted Answer · 2018-07-20T18:58:08

When I have done this before you need to point the @font-face url to the dist folder or wherever webpack outputs your files, relative to the file in the dist folder that requests them. For example:

dist/
  assets/
    fonts/
      font-file.ttf
  css/
    style.css
  index.html

Would mean that the @font-face path would be ../assets/fonts/font-file.ttf, completely irrespective of the src directory.

How to use @font-face with webpack's css-loader?

1 Answers