Vue cli and vuetify how to use with local Roboto font
With Vue CLI 3 + Vuetify:
install typeface-roboto
npm install --save typeface-roboto
in
public/index.html
, remove<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
in
src/App.vue
, add<style lang="sass"> @import '../node_modules/typeface-roboto/index.css' </style>
First install package typeface-roboto
into your project.
Then import it into your main.js/index.js/boot.js or whatever:
import 'typeface-roboto/index.css';
Finally, update your webpack.config.js
to allow the use of the font file types within the module rules i.e.:
module: {
rules: [
//other stuff
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=25000' }
]
},
The font file types are woff
, woff2
, eot
and ttf
.