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

Answer 1

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>