Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't load font with webpack & vuejs

I have some troubles having my font efficient on vuejs, I have no errors at all, my fonts are in the good folder and my webpack config seems to be efficient.

By the way I use less but I also have the less-loader.

Here's how I do :

@font-face {
  font-family: 'montserrat-extralight';
  src: url('../assets/fonts/montserrat-ExtraLight.ttf') format('truetype');
  font-family: 'montserrat-light';
  src: url('../assets/fonts/montserrat-Light.ttf');
}

And here is where I define the url-loader in my webpack.config :

{
  test: /\.(woff|woff2|otf|eot|ttf|svg)(\?.*$|$)/,
  loader: 'url-loader?importLoaders=1&limit=100000'
}

I've found many people with the same problem, but I actualy can't find THE way to make it work.

PS : my font are not uploaded in the network tab within developper mode...

Screenshot of font not being uploaded

like image 461
Loïc Monard Avatar asked Dec 14 '25 08:12

Loïc Monard


1 Answers

Your configuration seems ok, But try to remove limit param it may solve your problem, because a font file could very much outsize 100K.

like image 142
Tarik Chakur Avatar answered Dec 15 '25 21:12

Tarik Chakur