Loïc Monard Loïc Monard - 1 year ago 124
Less Question

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

Answer Source

Okay I finaly found a way to use my customs fonts :

I had the correct syntax but I just had to use .woff or .woff2 font files instead of .ttf or .otf. I can't explain why it's not working anymore, but I got what I wanted so it's allright ~

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download