1

Seems like it's a quite common problem but I couldn't find any solutions yet. I'm creating a project using webpack 4.41.2 where I need to use local fonts. Fonts are uploaded via @font-face. Here they are: 

@font-face {
    font-family: 'Roboto Slab', serif;
    font-style: normal;
    font-weight: 400;
    src:
        url('./fonts/robotoslab-regular-webfont.woff') format('woff'),
        url('./fonts/RobotoSlab-Regular.ttf') format('truetype');
}

and a few more like the first one. Here is the structure:

I can't publish pics yet, but here's a link to screenshot

so everything should be all right.

My config: 

{
  test: /\.(ttf|eot|woff|woff2)$/,
    use: {
      loader: "file-loader",
        options: {
          name: "fonts/[name].[ext]",
          publicPath: "",
                 },
          },
},

In dist folder everything is like this:

I can't publish pics yet, but here's a link to screenshot

But even before I've made folders here, @font-face didn't work.

The strange part:

  • dev tools don't show any errors;
  • @import from the font.css works perfectly (I just really need to use local fonts for the project);
  • fonts folder doesn't show up in dev tools sources.

There are no errors in build/dev too.

Earlier I had this problem with loading css background-image to webpack and I've solved it with adding publicPath: '../' to MiniCssExtractPlugin.loader options. It doesn't work with fonts apparently.

Lije Baley
  • 11
  • 2
  • If you can: don't bundle fonts. Just like images or your CSS. Host them as static assets, remember to make your `@font-face` declarations a _separate file_ that you initiate the load for before anything else, and now the browser will be able to actually rely on caching. – Mike 'Pomax' Kamermans Dec 14 '19 at 23:50
  • Thank you for your suggestion! I tried to make an unbundled build, but it didn't work. Seems like the system can't even _see_ the fonts, like they are non-existent, even though here they are in the dist directory. – Lije Baley Dec 15 '19 at 07:52
  • 1
    Oh, I made it by changing the order of css-files-declaration. So basically I use your tip and load file with @font-face before everything. Thank you so much! – Lije Baley Dec 15 '19 at 08:27

0 Answers0