Using local fonts with variable weight

[yannick-mir]

I'm trying to add local fonts with a variable weight but Nuxt cannot find the font face declaration.

Fonts are located here:
/public/fonts/Merriweather/Merriweather-400-700.ttf
/public/fonts/Satoshi/Satoshi-400-700.woff2

I tried naming them according to the docs, but it's still not working.

fonts: {
    families: [
      {
        preload: true,
        name: 'Merriweather',
        provider: 'local',
        weights: ['400 700'],
        styles: ['normal', 'italic'],
        subsets: ['latin'],
      },
      {
        preload: true,
        name: 'Satoshi',
        provider: 'local',
        weights: ['400 700'],
        styles: ['normal', 'italic'],
        subsets: ['latin'],
      },
    ],
    defaults: {
      preload: false,
      fallbacks: {
        'sans-serif': ['Arial'],
        'serif': ['Times New Roman'],
      },
    },
  },

 WARN  Could not produce font face declaration from local for font family Merriweather.

This was already asked here without response:
#178

[lucpotage]

I see your Merriweather font file ends in .ttf. Is it a copy/paste mistake?

I struggled myself understanding the naming rules for auto discovery. I recommend you to add an srcprop like this:

{
  preload: true,
  name: 'Merriweather',
  provider: 'local',
  weights: ['400 700'],
  styles: ['normal', 'italic'],
  subsets: ['latin'],
  src: '/fonts/Merriweather/Merriweather-400-700.woff2'
}

Here is a reproduction repo: https://stackblitz.com/edit/nuxt-fonts-issue-779?file=nuxt.config.ts

PS: I’m curious, but why limiting to 400-700 range for a variable font, does it optimize something?

[yannick-mir]

I eventually went for the src prop like you said.

I limited the weight range because those are the min and max values I use in my project, but maybe it's redundant.

[peteruithoven]

I faced the same issue, adding the src fixed it. Thanks for the tip!

It looks like variable fonts are just not supported.
There don't seem to be unit tests for variable names for the local provider (see #792).

The weight of file names like the following are not properly parsed:

• My-Variable-Font-100 900.woff2
• My-Variable-Font-100-900.woff2
• My-Variable-Font.100-900.woff2
  In these cases the weight is parsed as 100.

I think the following regexp needs a change:

fonts/src/providers/local.ts

Line 137 in 7ebc1f4

const WEIGHT_RE = createRegExp(anyOf(...new Set([...weights, ...weights.map(w => w.replace('-', ''))])).groupedAs('weight').after(not.digit).before(not.digit.or(wordBoundary)), ['i'])