Add "variable fonts" option

[Rvervuurt]

I would like to add fonts as variable fonts, but this doesn't seem supported.

Now, adding fonts looks like this:

googleFonts: { 
    families: {
      'Inter+Tight': [200,400,600,700],
      'Alegreya': true,
    }
  },

But this just adds 200, 400, 600 and 700 font weights and doesn't allow for animation of the font weight.

According to Google's own documentation, variable fonts are added as a range (200..700) instead of steps (200,400,600,700), so the above could could look like this:

googleFonts: { 
    families: {
      'Inter+Tight': [200..700],
      'Alegreya': true,
    }
  },

Is this something you could consider adding?

[Rvervuurt]

This works:

googleFonts: { 
    families: {
      'Inter+Tight': [200 + '..' + 700],
      'Alegreya': true,
    }
  },

But VScode returns an error:

[ricardogobbosouza]

Hi @Rvervuurt You can use it like this:

googleFonts: { 
    families: {
      'Inter+Tight': '200..700',
    }
  },

[ricardogobbosouza]

I will add an example to the documentation

[Rvervuurt]

Hi @Rvervuurt You can use it like this:

googleFonts: { 
    families: {
      'Inter+Tight': '200..700',
    }
  },

Ah yes, much better! This doesn't trigger an error. Good idea with adding it to the documentation.

[dukio]

Hi @Rvervuurt You can use it like this:

googleFonts: { 
    families: {
      'Inter+Tight': '200..700',
    }
  },

Hi, this works as expected while in development but once the nuxt app is built the font doesn't work... is it just me or is someone else experiencing this issue? The font I'm trying: Manrope [200..800]

Once built it outputs this inside the <style> tag in HTML:

@font-face {
    font-display: swap;
    font-family: Manrope;
    font-style: normal;
    font-weight: 200 800;
    src: url(/_nuxt/Manrope-200 800-2.26287892.woff2) format('woff2');
    unicode-range: u+0301, u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116;
  }

That src url() is not valid, should be enclosed in quotes. The actual files in .output/public/fonts have a space in the name:

In the nuxt-google-fonts.css file the urls are actually enclosed in quotes:

You can see a reproduction here: https://debugfontissue.davidegaio.com/ (user: test, pass: test) Config:

families: {
    Manrope: '200..800',
}

---

Note: I'm replying here because I think it's related to this issue but if you prefer I can create a new issue for this, let me know

[ricardogobbosouza]

@dukio fixed https://github.com/nuxt-modules/google-fonts/releases/tag/v3.1.1

[cordeirojhon]

Does it accept other parameters, such as opsz, FILL, GRAD? When I try passing these variables, Google Fonts returns 400: invalid selector.

The options I tried:

googleFonts: {
    families: {
      'Crimson Pro': {
        wght: '200..900',
        FILL: '0..1'
      }
    }
}

The code above generated the URL: https://fonts.googleapis.com/css2?family=Crimson+Pro:FILL,wght@0,200..900;1,0..1&family=Material+Icons&display=swap

The return explains that: Axes must be listed alphabetically (e.g. a,b,c,A,B,C). Also is mounting with 3 values and using semicolon to separate each axis. Considering it, I setted manually the URL to: https://fonts.googleapis.com/css2?family=Crimson+Pro:wght,FILL@200..900,0..1&family=Material+Icons&display=swap and it returns correctly.