Download and base64, duplicate fonts

[mastercoding]

I'm currently using the following config:

googleFonts: {
      families: {
        'Open Sans': [300, 400, 700],
      },
      display: 'swap',
      download: true,
      base64: false, // or true
    },

Google fonts combines multiple weights for the same style in a single font file, so the same woff2 file is served for all three weights (as can be seen here: https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap).

When I enable the base64 option, the same file is inlined three times, resulting in considerable overhead. I understand the current approach is to just inlining the files you encounter, so it might be nice to add an extra "strip" feature.

In stead of having 3 @font-face definitions with the same base64, I think only one suffices (the browser will render the other weights correctly as well). Or maybe a local('Open Sans') within the other two weights might be better. I'm not an expert on this, so any input is appreciated.

And another strip option could be to remove certain subsets. Currently the download: true and base64: true generates a big css with all subsets inlined, whereas I already know I only need latin & latin-ext.

So my config would ideally be:

googleFonts: {
      families: {
        'Open Sans': [300, 400, 700],
      },
      display: 'swap',
      download: true,
      base64: true,
      strip: {
        duplicates: true,
        subsets: ['cyrillic', cyrillic-ext', 'greek-ext', 'greek',... etc], // or maybe a subsets: { keep: {}} for clarity
      }
    },

[ricardogobbosouza]

See https://github.com/nuxt-modules/google-fonts/releases/tag/v3.1.0