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?

Answer 1

Works for vue3

1. Download the font and place it with other static assets.
2. 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');
}

3. Use it in your components like below

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

Answer 2

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');
}