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>
Share
Improve this question
edited Jan 24, 2019 at 11:06
Петровченко Иван
asked Jan 24, 2019 at 10:57
Петровченко ИванПетровченко Иван
1031 silver badge5 bronze badges
3 Answers
Reset to default 3You 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';