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.