17

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?

JohnC
  • 3,938
  • 7
  • 41
  • 48
  • What prevents you from just installing a package and importing the font-face in App.vue? https://www.npmjs.com/package/roboto-fontface – Sumurai8 Nov 23 '18 at 21:07
  • Actually, after revisiting this, probably that webpack does not automatically pick up the font files. This question may be useful to you: https://stackoverflow.com/questions/43348768/vuejs-webpack-importing-fonts-css-and-node-modules It suggests literally copying over the font files you need to your assets folder and manually defining the font-faces you require. – Sumurai8 Nov 23 '18 at 22:03

2 Answers2

26

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.

Sylvain Lesage
  • 831
  • 2
  • 12
  • 17
  • 1
    You're right. That's why the instruction is to "remove" the line, not to add it. I've highlighted the word **remove** in case it was not clear enough. – Sylvain Lesage Dec 05 '20 at 16:53
  • 1
    Yea, I didn't see that one before. Because I never had anything like that in my project, I didn't think that that's something to remove. My problem was solved by this: `` I missed the `rel="stylesheet"` attribute in the link. – Darkproduct Dec 10 '20 at 10:53
  • 1
    ``typeface-roboto`` is deprecated. Please replace it with ``fontsource-roboto``. See https://www.npmjs.com/package/typeface-roboto. – ikreb Dec 02 '22 at 14:51
15

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.

soupjake
  • 3,293
  • 3
  • 17
  • 32
  • 3
    Thank you very much SnakeyHips this was perfect. Did not need to modify a webpack.config.js (doesn't exist in my Vue CLI project), worked with first two steps alone. – JohnC Nov 26 '18 at 22:38
  • Thanks, this also worked for me with only the first two steps. – TangHongWan Oct 07 '21 at 02:43
  • 1
    The NPM package description says *"The Typefaces project is now deprecated."*. I see loads of other packages that claim to provide a roboto font, but I think the [fontsource one](https://www.npmjs.com/package/@fontsource/roboto) seems OK as replacement. – gertvdijk Nov 26 '21 at 12:03
  • Quick update for @gertvdijk's comment: the syntax for installing and importing fontsource packages has changed slightly: `npm install @fontsource/roboto` and then `import "@fontsource/roboto";` More details: https://fontsource.org/docs/getting-started https://fontsource.org/fonts/roboto – Daniel Sposito Jul 14 '22 at 23:47
  • ``typeface-roboto`` is deprecated. Please replace it with ``fontsource-roboto``. See https://www.npmjs.com/package/typeface-roboto. – ikreb Dec 02 '22 at 14:50