Ask Question Sign In Sign Up

How to use custom fonts in vuetify?

Member

by dalton_moen , in category: Javascript , 3 months ago

How to use custom fonts in vuetify?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by filiberto , 3 months ago

@dalton_moen 

To use custom fonts in Vuetify, follow these steps:

  1. Include the font files: Ensure that you have the font files (e.g. .ttf, .woff, .woff2) for the custom fonts you want to use. You can download the font files from a website or use a font generator tool to create the files.
  2. Add the font files to your project: Place the font files in a directory within your project, such as src/assets/fonts.
  3. Import the fonts in your styles: In your main CSS or SCSS file, import the custom fonts using @font-face. For example: 
1
2
3
4
5
6
7
8

@font-face {
    font-family: 'CustomFont';
    src: url('~@/assets/fonts/CustomFont-Regular.ttf') format('truetype');
}

body {
    font-family: 'CustomFont', sans-serif;
}


  1. Register the font in Vuetify: In your Vuetify configuration file (e.g. vuetify.js), register the custom font by adding it to the theme section, like this:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
    theme: {
        themes: {
            light: {
                fonts: {
                    customFont: 'CustomFont, sans-serif',
                },
            },
        },
    },
});


  1. Use the custom font in your components: You can now use the custom font in your Vuetify components by referencing it in the style property. For example:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<template>
  <v-app>
    <v-toolbar app color="primary">
      <v-toolbar-title class="font-customFont">Custom Font Example</v-toolbar-title>
    </v-toolbar>
  </v-app>
</template>

<script>
export default {
  name: 'CustomFontExample',
};
</script>

<style>
.font-customFont {
  font-family: 'CustomFont', sans-serif;
}
</style>


By following these steps, you will be able to use custom fonts in your Vuetify project.

Related Threads:

How to add custom fonts to the quill.js editor?
How to config webpack to load custom fonts into storybook?
How to include fonts in a storybook build?
How to use font-awesome svg with vuetify and nuxt.js?
How to use vuetify tabs with vue-router via router name?
How to use custom style loader in vite?