Lost bold font after upgrading from `0.11.2` to `0.11.3`

[mrleblanc101]

Before:

After:

font-weight is still 700, but NotoSans-Regular gets loaded.
No other change was made in my app, but upgrade this single dependency.
Reverting to 0.11.2 fix the problem.

[duncandejong]

same here with inter

[danielroe]

have you specified that font weight in your options? by default nuxt fonts only loads the regular font weight....

the behaviour change is that nuxt fonts doesn't load variable fonts unless you specify a weight range (e.g. 100 800) - probably bold was previously displaying because variable font files were loading

[Norbiros]

This fixes the issue for me, but it is a significant breaking change, that shouldn't be changed in patch version. For example, if someone is using @nuxt/ui, it's never mentioned in their docs, that in most cases, you need to modify the default configuration. Even the Nuxt Fonts documentation states:

Plug-and-play web font optimization and configuration for Nuxt apps.
You do not need to configure Nuxt Fonts but you can do so for finer-grained control.

But in reality, you now do need to configure it to enable basic features like bold text.

[benjamincanac]

@Norbiros I just realized that and pushed this fix: nuxt/ui@276268d to automatically configure @nuxt/fonts with weights used in @nuxt/ui:

{
  defaults: {
    weights: [400, 500, 600, 700]
  }
}

This way we keep a seamless integration between @nuxt/ui and @nuxt/fonts while allowing users to override with their own configuration.

[Norbiros]

Thanks! It works perfectly for me. I think this issue can be closed. In the future, please mention changes like not loading all fonts or not recommending the use of processCSSVariables in the release notes. This would make it easier for us to update

[jedifunk]

how exactly do you properly set the variable font weight(s)?

@danielroe seems to indicate something like [100 900] but @benjamincanac seems to indicate something like [100, 200, 300] etc.

how do i get the full range of a variable font? ie: 100...900?

here's a stackblitz where i'm trying to get variable fonts to work with no luck
here

[smaronn]

@jedifunk, via nuxt.config.ts:

fonts: { defaults: { weights: [100, 200, 300, 300, 400, 500, 600, 700, 800, 900], }, },

Docs: Link

I think font weight 300 could also be included by default, given how common the light font is nowadays, e.g. when using it via Tailwind with font-light.
Anyway, thank you for your great work!

[jedifunk]

IMO this completely defeats the purpose of a variable font.

what if i want 175, and 525? i have to set those too? seems like it should accept the entire range (ie: 100...900).

or am i missing something here

[smaronn]

The only available values are between 100 and 900: Link

Including all font weights would increase the bundle size and only makes sense if the font supports them. It therefore makes sense to include the most common ones by default and allow developers to adjust them according to their needs.

[jedifunk]

The only available values are between 100 and 900: Link

Including all font weights would increase the bundle size and only makes sense if the font supports them. It therefore makes sense to include the most common ones by default and allow developers to adjust them according to their needs.

i agree on bundle size, but the option should be available to take the entire font.

its sort of the whole point of a variable font. anything between 100 and 900 is available. and if you use different sets for font weight, like calc or min/max type things it would be impossible in this setup.

if support for variable fonts is something the module wants to do, i think it should be fully supported.

i'm guessing it is, and i'm just not setting it up correctly though

[qwerzl]

Hi all, the proper way to set a variable weight axis is through eg.weights: ['100 900'], just as how you'd define it in plain CSS. You could either define it globally in fonts.defaults or per-family through the families option.

As for the change in the default variable behavior for this module, it is introduced by unjs/unifont#154. Changes need to be made there as it no longer provides a way to select a full axis.

[mrleblanc101]

have you specified that font weight in your options? by default nuxt fonts only loads the regular font weight....

the behaviour change is that nuxt fonts doesn't load variable fonts unless you specify a weight range (e.g. 100 800) - probably bold was previously displaying because variable font files were loading

@danielroe No, because it was not necessary.
So loading the variable fonts was a bug ?
I'm not sure I understand.
Does this mean Nuxt font will convert a variable font to a non-variable font ?
That make no sense to me as it would increase the bundle size and provide no benefits.
Why was this change pushed in a patch release ? Because it's supposed to be a "bugfix" ?
Should it be reverted and pushed as a breaking change inside a major ?
Or should this be better documented in the release notes, to help people that relied on the previous behavior.

The only available values are between 100 and 900: Link

Including all font weights would increase the bundle size and only makes sense if the font supports them. It therefore makes sense to include the most common ones by default and allow developers to adjust them according to their needs.

@smaronn Variable font have the exact same bundle size wether you use 100..900 or 400..900, that's the whole point !
Instead of having different variant for each weight, the weight is a mathematical modification of the base font. Same for the slant. So, I'm not sure what you mean by this.