Css-loader: my url() in font-face is not working as expected

[EnixCoda]

Hi all, i'm trying to use some font files in my project with 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 set in default font-family, though i've set font-family: 'Roboto' to the text element).

I've been working on this problem for 2 days, googled almost every possible page.
Could anyone help me?

[bebraw]

Instead of src: url(/Roboto/Roboto.ttf) format('truetype'); you probably want src: url(./Roboto/Roboto.ttf) format('truetype');. css-loader does not process absolute urls by design so you have to go with a relative one instead if you want to refer to the file system.

Feel free to re-open at Stack Overflow if that didn't resolve the issue.

[EnixCoda]

@bebraw
thanks for replying, but using the relative url is the first thing I've tried and it did not work
errors occurred when I use relative url:
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

[bebraw]

@EnixCoda The next thing I would try is disabling CSS Modules. Get as simple case working as possible. Then you can work out the difference and possible fault.

[EnixCoda]

@bebraw
I've been trying on that for the last 2 days but figuring out the right way of using these loaders is like shooting in the dark. Maybe I should give up and find another way out.

Thanks any way!

[bebraw]

@EnixCoda If you can link me to a little project I can run, I don't mind giving it a quick whirl. It takes only one little thing somewhere.

[totymedli]

For me the problem was that I wrote format('ttf') instead of format('truetype').