In my Vue project file index.html add this text:

<link href=':100,300,400,500,700,900|Material+Icons' rel="stylesheet">

add in ponent toolbar from Vuetify, but in toolbar displayed incorrect

How i change font in toolbar?

<template>
  <v-toolbar color="lime accent-1" height="60px">
    <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>

In my Vue project file index.html add this text:

<link href='https://fonts.googleapis./css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

add in ponent toolbar from Vuetify, but in toolbar displayed incorrect

How i change font in toolbar?

<template>
  <v-toolbar color="lime accent-1" height="60px">
    <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>

• javascript
• vue.js
• vuetify.js

3 Answers 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>

I believe your issue is that your ponents 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.

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';