How can i insert a font from my local project in vue and vuetify?

Question

i tried to add a font from my local project to vuetify and set that for main font but it does not work. this is my project: main folder public src assets font's my font iranyekan.css node modules

and this is my index.html in public

<style>
      @font-face {
        font-family: "IranYekan";
        src: url("../assets/fonts/IranYekan/iranyekanwebregular.woff2") format("woff2"),
        url("../assets/fonts/IranYekan/iranyekanwebregular.ttf") format("ttf"),
        url("../assets/fonts/IranYekan/iranyekanwebregular.woff") format("woff");
      }
    </style>

but it does not work. thanks

here you have a many ways. github.com/vuetifyjs/vuetify/issues/8169 — Henrique Van Klaveren
– Henrique Van Klaveren, Commented Dec 10, 2019 at 18:53
@HenriqueVanKlaveren i have a local font in my project. those way's are for cdn's — Matthew
– Matthew, Commented Dec 11, 2019 at 13:04

Henrique Van Klaveren · Accepted Answer · 2019-12-11 14:12:59Z

6

Try change your links to use:

@/assets/fonts/IranYekan/iranyekanwebregular.ttf
or ~/assets/fonts/IranYekan/iranyekanwebregular.ttf 
or ~@/assets/fonts/IranYekan/iranyekanwebregular.ttf

I don't know how is your project, but vue reference the root directory with ~ or @, so do you can try?

<style>
      @font-face {
        font-family: "IranYekan";
        src: url("~@/assets/fonts/IranYekan/iranyekanwebregular.woff2") format("woff2"),
        url("~@/assets/fonts/IranYekan/iranyekanwebregular.ttf") format("ttf"),
        url("~@/assets/fonts/IranYekan/iranyekanwebregular.woff") format("woff");
      }
    </style>

answered Dec 11, 2019 at 14:12

Henrique Van Klaveren

1,78017 silver badges25 bronze badges

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

1 Comment

Liebster Kamerad Over a year ago

Sir, you saved my day, was fighting with it for quite a while. Now combined with varibles.scss as described here vuetifyjs.com/en/customization/sass-variables it finally works!

Collectives™ on Stack Overflow

How can i insert a font from my local project in vue and vuetify?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related