How to add font in Vue.js project

Question

I have a project with Laravel and Vue.js and I use scss. I want to add new font into my project and I can't do this. I create file fonts.scss, create a variable with font

@font-face {
  font-family: "Proxima Nova Bold";
  src: url(/Proxima-Nova-Bold.otf);
}

$proxima-nova-bold: 'Proxima Nova Bold', sans-serif;

And I have console mistake GET http://local.{my-domain}/Proxima-Nova-Bold.otf net::ERR_ABORTED

Here is how I import scss file in Vue component

@import '../../../fonts/fonts.scss';

Here is my laravel mix

let mix = require('laravel-mix');

mix.copy('resources/assets/images', 'public/images', false)
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')

Where did I make mistake? Or tell me how to add fonts correctly?

You told it how to load the font face, and you gave it a path. If that file doesn't exist at public/Proxima-Nova-Bold.otf, the client can't request it. Make sure it does. — Ohgodwhy
– Ohgodwhy, Commented Jul 25, 2018 at 16:54
Yes, you are right. But how can I work only in resources, not public? maybe should I write some rule for webpack? — Yaroslav Saenko
– Yaroslav Saenko, Commented Jul 25, 2018 at 17:27
What is your exact build setup for your frontend? laravel mix ? vue-cli ? plain webpack ? For a first guess I don't see any reason of using an absolute path in the url there. Use the relative path and if webpack is setup correctly it will handle resolving and bundling the font correctly. — Frnak
– Frnak, Commented Jul 25, 2018 at 18:44
@FrankProvost I use laravel mix. Add code snippet to the question — Yaroslav Saenko
– Yaroslav Saenko, Commented Jul 25, 2018 at 19:50

Venkatesh A · Accepted Answer · 2021-10-04 19:29:05Z

18

Works for vue3

Download the font and place it with other static assets.
In app.vue register the font family with @font-face like below:

<style>
@font-face {
    font-family: <name_u_choose>;
    src: url('~@/assets/fonts/<static_font_file>.ttf');
}

Use it in your components like below

<style>
<you-selector> {
    font-family: <name_u_chose_before>;
}
</style>

answered Oct 4, 2021 at 19:29

Venkatesh A

2,5743 gold badges24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

winwin Over a year ago

it worked for me without ~ at the start of url: src: url('@/assets/fonts/<static_font_file>.ttf');

Frnak · Accepted Answer · 2018-07-26 06:30:57Z

6

Based on this issue in the laravel mix github https://github.com/JeffreyWay/laravel-mix/issues/1172 laravel mix will copy the fonts automatically when referencing them correctly.

Therefore i suggest to use a relative path when referencing the font. This should actually trigger laravel mix to create a folder "fonts" in your "public" folder

@font-face {
  font-family: "Proxima Nova Bold";
  src: url('./../fonts/Proxima-Nova-Bold.otf');
}

answered Jul 26, 2018 at 6:30

Frnak

6,8626 gold badges38 silver badges74 bronze badges

1 Comment

Yaroslav Saenko Over a year ago

this cause an error while building, the only way to run yarn dev is only this way @font-face { font-family: "Proxima Nova Bold"; src: url(/Proxima-Nova-Bold.otf); }

kaizer_bun · Accepted Answer · 2018-07-26 00:02:55Z

0

You may need to add a line like this to your mix file:

.copy('resources/fonts', 'public/fonts')

answered Jul 26, 2018 at 0:02

kaizer_bun

493 bronze badges

2 Comments

Frnak Over a year ago

This should not be required when using laravel-mix

Yaroslav Saenko Over a year ago

This method imports only scss file, but not the fonts. How could I import fonts files?

Collectives™ on Stack Overflow

How to add font in Vue.js project

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related