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.