DEV Community

Wonuola
Wonuola

Posted on

Using downloaded custom fonts in Vue.

This is a breakdown of how to use downloaded fonts in Vue.
Step 1: Download your fonts.
You can check out befont for downloadable fonts.
Step 2: Add the downloaded fonts files 📄 to your assets folder 📂 in Vue.
Step 3: In App.vue, write out this code

@font-face {
  font-family: 'Aeonik';   /* Name of the font */
  src: url('./assets/AeonikTRIAL-Regular.otf');   /* Link to access your downloaded fonts */

}

#app {
  font-family: 'Aeonik', Helvetica, Arial, sans-serif;}
Enter fullscreen mode Exit fullscreen mode

You can also use these fonts generally in other components you've created.
Cheers 🥂

Top comments (0)