[Vuejs]-Fonts in vuetify template, how change?

by

3👍

✅

You can used scoped style so it will only apply to the elements of its parent(s) and children. You can read more here

In your case you’d need to apply a class to your v-toolbar element as follows:

<template>
  <v-toolbar color="lime accent-1" height="60px" class="change-font">
    <v-toolbar-side-icon>
      <v-icon>android</v-icon>
    </v-toolbar-side-icon>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down abc">
      <v-btn flat>Signup</v-btn>
      <v-btn flat>Login</v-btn>
    </v-toolbar-items>
  </v-toolbar>
</template>

<script>
</script>

<style lang="stylus" scoped>
.change-font {
    font-family: "Arial", Helvetica, sans-serif;
}
</style>
👤SiliconMachine

3👍

I believe your issue is that your components have no reference to the imported font.

For vuetify, I add the npm packages for roboto-fontface, material-design-icons, then import them into my main.js (if you are using webpack).

import 'roboto-fontface/css/roboto/roboto-fontface.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';

And then vuetify will be able to access these natively, without referencing styles.

👤Screll

0👍

I was facing the same problem – had the link in the index.html but roboto was not showing up

My problem was the way I’d imported vuetify in plugins/vuetify.ts

Incorrect import

import Vuetify from 'vuetify';

Correct import

import Vuetify from 'vuetify/lib';
👤Dan F

Leave a comment