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

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.

Answer 2

With Vue CLI 3 + Vuetify:

• install typeface-roboto

    npm install --save @fontsource/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/@fontsource/roboto/index.css'
    </style>
  

---

Edit: replaced typeface-roboto with @fontsource/roboto. See https://www.npmjs.com/package/typeface-roboto. Thanks @ikreb.