google-fonts: Download mode is not working!

Just wanted to run a basic test with the config below nuxt.config.js

export default {
    modules: [
      [
      '@nuxtjs/google-fonts'
    ],
    googleFonts: {
      families: {
        Roboto: true,
        "Roboto Mono": true,
        Mali: {
          wght: [400, 600, 700],
        },
      },
      download: true
    }
  }

pages/index.html:

<h2 style="font-family: Roboto">Teseting Fonts Roboto</h2>
<h2 style="font-family: Roboto Mono;font-weight:bold">Teseting Fonts Roboto Monospace</h2>
<h2 style="font-family: Mali">Teseting Fonts Roboto Mali</h2>

and It’s just not working ( every text falls back to the default font ) but when I switch the download: false it works fine. it also won’t show any errors or logs in build time. I tried it with other options like base64, outputDir, fontsDir, fontsPath no change still not working.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 28

Most upvoted comments

This seems to be working for me now. However I’m using nuxt generate to build. Using version @nuxtjs/google-fonts 1.3.0 and nuxt 2.15.6.

My nuxt.config.js:

  googleFonts: {
    // Using the same default font as Vuetify from
    // https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap
    families: {
      Roboto: [100, 300, 400, 500, 700, 900]
    },
    display: 'swap',
    download: true,
    overwriting: true
  },

kngai on Jun 23, 2021

Removing the assets/css/fonts.css and assets/fonts worked for me! After I deleted the file and folder I ran yarn dev again.

 "nuxt": "2.14.7",
 "@nuxtjs/google-fonts": "1.2.0",

jornwildenbeest on Nov 30, 2020

I have a similar issue, but in my case only files for the 100 weight is downloaded and only with the following config Version info: nuxt - 2.14.7 @nuxtjs/google-fonts - 1.2.0

  googleFonts: {
    download: true,
    families: {
      Roboto: [100, 300, 400, 500, 700, 900],
    },
  },

  googleFonts: {
    download: true,
    families: {
      Roboto: true,
    },
  },

When I use the following I get a bad request error during build

  googleFonts: {
    download: true,
    families: {
      Roboto: {
          wght: [100, 300, 400, 500, 700, 900],
          ital:[100]
      }
    },
  },

mayowa on Nov 26, 2020

I can confirm that it is broken Regardless what I do, it adds a {"rel":"stylesheet","type":"text\u002Fcss","href":"https:\u002F\u002Ffonts.googleapis.com\u002Fcss?family=Roboto:100,300,400,500,700,900&display=swap"} to the project and requests the fonts from google.

Even useStylesheet: false doesn’t prevents adding it as stylesheet in the head section.

Edit: I think may case was special. I also use vuetify and need to add ´defaultAssets: false, to my vuetify configs. https://github.com/nuxt-community/vuetify-module#defaultassets

MartinX3 on Apr 5, 2022

Doing this;

Roboto: {
    wght: [400],
},

instead of this:

Roboto:  [400],

worked for me.

eeerlend on Feb 2, 2022

seems to be working for me now on @nuxtjs/google-fonts 1.3.0 and nuxt 2.15.6. just remove the unnecessary settings.

buildModules: [
  // https://go.nuxtjs.dev/typescript
  '@nuxt/typescript-build',
  [
    '@nuxtjs/google-fonts',
    {
      families: {
        Poppins: [300, 400, 500, 600, 700],
        Quicksand: [300, 400, 500, 600, 700]
      },
      display: 'swap',
      download: true,
      overwriting: false
    },
  ],
],

RyaiStudio on Oct 19, 2021

Same issue as @mayowa Roboto uses only 100 weight no matter the options used. When using wgth it fails loadings.

jTiKey on Jan 31, 2021

You can try to enable overwriting or do as @jornwildenbeest

https://google-fonts.nuxtjs.org/downloading#overwriting

ricardogobbosouza on Dec 16, 2020