Vue cli and vuetify how to use with local Roboto font

Question

I have a Vue / Vuetify application under development created with the VUE CLI 3.x and would like to serve the Roboto font locally, not via Google cdn.

Has anyone accomplished this via webpack and the vue cli generated vuetify app project and if so how did you go about it?

Answer 1

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>
  

Answer 2

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.