Custom format in src

[sinneren]

Steps to Reproduce

Add woff2 font
Use it in component via "useLocalFont"

Current Behavior

My font for Safari needs to custom format.
I use woff2 font, and format automatically sets format('woff2') but I need format('woff2-variations').
Is it possible?

Expected Behavior

Changed format to custom

Additional Details

No response

Version

2.3.5

[ivodolenc]

Hi, since this is not a bug but a question, I'm moving it to the discussion.

As for the module, currently the font format is automatically parsed from the src input name, so this would require additional logic or a new option specifically for this.

Also, can you please provide a solid example of why this would be a useful addition for the module? I think this format('woff2-variations') is specifically designed for variable fonts and older edge cases, helping browsers recognize variable font functionality.

For modern browsers, it will work fine even if you just use format('woff2'), assuming the font is variable, it will still work as long as the font itself supports variations.

The benefit of format('woff2-variations') is minimal in today’s web development, so you’re not missing anything by sticking with format('woff2'). The font itself is what determines if variations are available.

You can also later control content with CSS classes that apply custom font settings, such as font-feature-settings: 'ss03' 1, 'ss06' 1;, font-variation-settings: 'wght' 300; etc.

[sinneren]

We used fontsource in our old project on Nuxt 2 and it generates css with 'woff2-variations'. In new project on Nuxt 3 we adding fonts via this module. And we copied all font settings and font features, get all files from old project and have only one difference - format value. We tested it in browserstack with iPhone 14 and font doesn't rendered. After then we manually add font and settings in style section and change format, and all works well now.

Sorry, don't have solid example now, don't have a time, will tried to do it later.