It only downloads 400 font-weight

[mehmetuygun]

My Nuxt config file is as below

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  modules: [
    '@nuxt/image',
    [
      '@nuxtjs/google-fonts',
      {
        display: 'swap',
        subsets: 'latin',
        families: {
          Inter: {
            wght: [100, 400, 500, 900],
          },
          Lexend: {
            wght: [100, 400, 500, 900],
          },
        },
        prefetch: false,
        preconnect: false,
        preload: false,
        download: true,
        base64: false,
      },
    ],
  ],
})

It only downloads 400 font-weight.

[mkierdev]

Same here, any updates?

[gibbsy]

Same issue here

[devberkay]

Specifying the font weights explicitly works for me:

here is my setup - nuxt.config.ts:

googleFonts: {
    download: true,
    text:"abcçdefgğhıijklmnoöprsştuüvyzABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZ0123456789!@#$%^&*()-_+=<>?/:;.,•",
    families: {
      subsets: [4,5],
      Lato: {
        wght: [100,200,300,400,500,600,700,800,900],
      }
    },
  },

[gibbsy]

This setup is working for me now. Had to move the css out of the assets folder because any changes to the fonts erased the whole assets folder. Other than that it's working well

googleFonts: {
    families: {
      Inter: {
        wght: [300, 400, 700],
      },
    },
    inject: true,
    base64: false,
    download: true,
    outputDir: "gfonts",
    subsets: "latin",
    stylePath: "google-fonts.css",
    fontsDir: "gfonts/fonts",
  },
  css: ["~/gfonts/google-fonts.css"]

[stanislav-janu]

I have same problem.

googleFonts: {
    families: {
        Rubik: {
            wght: [400, 500],
            ital: [400],
        },
    },
    display: 'swap',
    subsets: 'latin-ext',
},

[stanislav-janu]

Problem is in package google-fonts-helper in functionconstructURL(...). If you remove the subset parameter, it will start working correctly.

[andreypopov]

any official fix for subsets?

[lkjimy]

Same issue here

"@nuxtjs/google-fonts": "^3.1.3"

export default defineNuxtConfig({
  modules: ['@nuxtjs/google-fonts'],

  googleFonts: {
    display: 'swap',
    prefetch: true,
    preconnect: true,
    preload: false,
    useStylesheet: false,
    subsets: 'latin',

    families: {
      'Josefin+Sans': {
        wght: [300, 400]
      },

      'Playfair+Display': {
        wght: [400, 800]
      }
    }
  }
})

The log for this setup: (Notice the URL doesn't have the weights declared in the options)

◐ Downloading fonts...
✔ https://fonts.googleapis.com/css?family=Josefin+Sans|Playfair+Display&display=swap&subset=latin
ℹ Josefin_Sans-400
ℹ Playfair_Display-400
✔ Download fonts completed.

When subsets is removed from the options, the URL changes. (The URL now contains the weights)

◐ Downloading fonts...
✔ https://fonts.googleapis.com/css2?=Josefin+Sans:wght@300;400&family=Playfair+Display:wght@400;800&display=swap
ℹ Josefin_Sans-300
ℹ Playfair_Display-400
✔ Download fonts completed.

Here's a reproduction: https://stackblitz.com/edit/nuxt-starter-rjcgir?file=nuxt.config.ts

[cn-2k]

This works for me:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },

  modules: [
    "@nuxtjs/google-fonts",
  ],

  googleFonts: {
    families: {
      Inter: [100, 300, 400, 500, 600, 700],
    },
  },
});

[ricardogobbosouza]

This will solve the problem with subsets https://github.com/datalogix/google-fonts-helper/pull/64

[ricardogobbosouza]

Released v3.2.0