Can’t import font-face using webpack-4 file-loader

Question

I’m trying to import a font family into my react app using webpack file-loader and I keep getting this error:

Module not found: Error: Can't resolve './fonts/gilroy-bold/Gilroy-Bold.woff2'

I tried with url-loader but It’s the same.

Here is my file structure:

src
├── assets
│   ├── fonts
│   │   └── gilroy-bold
│   │       ├── Gilroy-Bold.woff
│   │       └── Gilroy-Bold.woff2
│   ├── scss
│   │     └── 00_settings
│   │         └── _settings.fonts.scss

Webpack code:

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    loader: 'file-loader',
    options: {
      outputPath: 'dist/fonts' 
    }
}

CSS:

@font-face {
  font-family: "Gilroy-Bold";
  src: url("./fonts/gilroy-bold/Gilroy-Bold.woff2"),
       url("./fonts/gilroy-bold/Gilroy-Bold.woff");
}

$font-family-accent: 'Gilroy-Bold';

I tried to follow this article: https://survivejs.com/webpack/loading/fonts/ and a lot of other articles...

Answer 1

SOLVED! The problem was in the CSS font path which is weird regarding file structure...

@font-face {
  font-family: "Gilroy-Bold";
  src: url("../fonts/gilroy-bold/Gilroy-Bold.woff2"),
       url("../fonts/gilroy-bold/Gilroy-Bold.woff");
}

I tried both url(./) and url(../../) but none of it works...