Download mode is not working!

[AminAzGol]

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.

[dsturm]

Hej @AminAzGol,

you stated modules in your config, but this should be buildModules. Did you check this?

Best

[AminAzGol]

Yeah you're right that was my mistake but the problem still exists. could it have some conflicts with other modules? like I'm using i18n for multi-lang support the complete config file is:

export default {
    modules: [
      ['nuxt-i18n', {strategy: 'prefix_and_default', lazy: 'true'}]
    ],
    buildModules: ['@nuxtjs/google-fonts'],
    i18n: {
      locales: [
        {
          code: 'en',
          name: 'English'
        },
        {
          code: 'es',
          name: 'Español'
        },
        {
          code: 'fr',
          name: 'Français'
        }
      ],
      defaultLocale: 'en',
      vueI18n: {
        fallbackLocale: 'en',
        messages: {
          en: require(__dirname+"/locales/en.json"),
          fr: require(__dirname+"/locales/fr.json"),
          es: require(__dirname+"/locales/es.json") 
        }
      }
    },
    googleFonts: {
      families: {
        Roboto: true,
        "Roboto Mono": true,
        Mali: {
          wght: [400, 600, 700],
        },
      },
      download: true
    }
  }

[ricardogobbosouza]

Hi @AminAzGol

You tested with the version v1.2.0?

[dsturm]

Hey @AminAzGol and @ricardogobbosouza,

I ran into the same issue, using "nuxt":"2.14.7" and "@nuxtjs/google-fonts": "^1.2.0". The build hook generates a fonts.css, but it seems that the await GoogleFontsHelper.download(...) gets an empty response in google-fonts-helper/src/index.ts and so parseFontsFromCss() could not parse any fonts.

Currently I don't have a clue, why the request returns an empty body, since the url is valid. 🤔

Best

[AminAzGol]

@ricardogobbosouza Well, I updated to v1.2.0 and tested again still the same before that, I tested v1.1.6 and v1.1.2 just to check if changing the version will fix it or not, apparently, it didn't. the same scenario with @dsturm happens that it will generate a assets/css/fonts.css file and it just an empty file... my version of nuxtjs is also "nuxt": "^2.14.7"

[mayowa]

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],
    },
  },

or

  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]
      }
    },
  },

[jornwildenbeest]

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",

[ricardogobbosouza]

You can try to enable overwriting or do as @jornwildenbeest

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

[AminAzGol]

@ricardogobbosouza @jornwildenbeest I've tried your suggestions still no luck. tried overwriting: true also removing assets/css/fonts/assets/css/fonts..css. Same issue, it just creates assets/css/fonts.css with empty content and nothing more. I even thought that might be an issue on npm so switched to yarn but that didn't help either.

[jTiKey]

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

[tikeau]

Same issue, seems that upgrading google-fonts-helper to 2.0.1, fixes overwriting problem, nevertheless, by using the subsets option, google-fonts-helper chooses to use the old google-fonts api which doesnt downloads all the fonts.

[kngai]

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
  },

[GautierDele]

Can confirm that this is completly bugged This is effectively working with roboto but no other fonts are working at all

For those coming here, this feature has never worked before. You can achieve the same comportment by manually importing all the files like this plugin would by using: https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,700,900&display=swap Simply replace the font and weight as needed. Download the woff2 files and include them in your project

[Sergei8888]

Same issue. When download: true Montserrat use only 400 font

[RyaiStudio]

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
    },
  ],
],

[LiNCH35]

If overwriting: true is not set, loaded only 400 weight font

[Andrija84]

Hi, Try to remove the fonts.css and fonts folder that was previously created and run build again

[eeerlend]

Doing this;

Roboto: {
    wght: [400],
},

instead of this:

Roboto:  [400],

worked for me.

[ricardogobbosouza]

Soon I will release the new version of google-fonts-helper will fix this problem

It is worth remembering that when using subsets automatically or the module uses google fonts v1 which does not allow you to define some fonts weights

See https://developers.google.com/fonts/docs/getting_started https://developers.google.com/fonts/docs/css2

[MartinX3]

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

[VanillaCocaCola]

Hi there. Any updates?

I have the same issue. GET https://localhost:3000/_nuxt/fonts.css net::ERR_ABORTED 404 (Not Found)

['@nuxtjs/google-fonts', { display: 'swap', download: true, overwriting: true, families: { Raleway: ['300', '400', '500', '600', '700'], Roboto: ['300', '400', '500', '700'] } }],

[sebastian-muthwill]

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

Hi, I can confirm that it must have something to do with the defaultAssets from vuetify.

With the following configuration I could manage it to load the fonts on server start and not via CDN.

 vuetify: {
    //https://github.com/nuxt-community/vuetify-module
    defaultAssets: false,
  },

  googleFonts: {
    families: {
      Roboto: true,
      Lato: [100, 300, 400, 500, 700, 900],
    },
    display: 'swap',
    download: true,
    overwriting: false
  },

[ricardogobbosouza]

Please try v3.0.0-1

[ricardogobbosouza]

If the problem persists, please reopen

[Juanpam]

@ricardogobbosouza I'm running into these same issues and tried running npm install --save-dev @nuxtjs/[email protected] to no avail.

Is there something else I should be doing to install that version?

[Juanpam]

NVM, that version is only compatible with Nuxt 3 and I'm using Nuxt 2

[sh0ber]

Still cannot use subsets or you will run into massive problems. And it still does not download all fonts with download true. (Vite/Nuxt 3 using 3.0.0-1).

[kanhancaspar]

it worked for me that add the property under download: true,

outputDir: 'assets',

I think that cannot auto set the output folder like Nuxt 2,so need to tell it where to output those fonts files