Webpack load fonts

Question

I have this code in a React element:

require('../../Style/fonts/SomethingStrange.ttf')

In my Webpack.config:

{ test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
      loader: 'file-loader?name=fonts/[name].[ext]' }

Problem: no font on my webpages...

Doesn't Webpack let me automatically require fonts? Do I have to program anything else to load fonts?

Answer 1

You have to require your fonts inside css files, not inside js/jsx files. For example:

@font-face {
    font-family: 'SomethingStrange';
    src: url('../../Style/fonts/SomethingStrange.ttf');
}