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: https://github.com/nuxt/ui/commit/276268d311f57715cec47bc600a0ccc3d3885682 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.

[danielroe]

temporarily releasing another minor under 0.11.4 to avoid breaking projects

we'll release the unifont upgrade under 0.12 and also see if there's something we can do to auto-detect when to use variable fonts... (they are heavier than single weights but generally better if multiple weights are involved)

[mrleblanc101]

@danielroe Even without auto-detection, I'm not sure I understand how to handle Variable font currently. I wouldn't mind if I had to add a config option like preferVariable: true

[ponochovny]

I need this Montserrat 900 font and I don't get it. Here what I receive:

with class="font-black font-['Montserrat']"

✅FIXED BY: setting fonts inside nuxt.config.ts

export default defineNuxtConfig({
	// ...
	fonts: {
		families: [
			{ name: 'Montserrat', provider: 'google', weights: [900] },
			// {
			// 	name: 'Open Sans',
			// 	provider: 'google',
			// 	weights: [400, 500, 600, 800, 900],
			// },
		],
	},
})

[mrleblanc101]

@danielroe Downgrading to 0.11.4 doesn't fix the issue for me.

In prod:

[alexanderhorner]

Yea 0.11.4 doesn't fix the issue. Have to downgrade to 0.11.2

[mrleblanc101]

In the end, I just added fonts: { defaults: { weights: [400, 500, 600, 700] } }. But that doesn't really explain why this is necessary for a variable font 🤔 Is is converted to a regular font ? That probably not supposed to happen because the variable font is lighter as soon as you use more than one weight, which I suppose most people do (at least 400 and 700).

It's just weird that it clain to be "zero-config", I think it cause more confusion that it's work. If the plugin didn't claim to be zero config, people would configure it properly and things like this wouldn't happen. The gain is so minimal, I think they should remove the zero config mode.

[alexanderhorner]

In the end, I just added fonts: { defaults: { weights: [400, 500, 600, 700] } }. It's just weird that it clain to be "zero-config", I think it cause more confusion that it's work. If the plugin didn't claim to be zero config, people would configure it properly and things like this wouldn't happen. The gain is so minimal, I think they should remove the zero config mode.

But what's the point, that's what variable font is for. Not gonna download a gazillion font weights if one variable font file is enough.

[mrleblanc101]

@alexanderhorner Yeah, I was just updating my comment when you replied. It's not clear if @nuxt/font really support variable fonts, it's not mentioned anywhere in the docs.

[ezequidias]

Version 0.11.4 doesn't solve the problem here either! I had to downgrade to version 0.11.2!

Você especificou o peso da fonte nas suas opções? Por padrão, o nuxt fonts carrega apenas o peso de fonte regular....

Besides that, I also think this doesn't make any sense! The most amazing thing about Nuxt Fonts is that it automatically loads the fonts and weights! In my application, I don't do any extra configuration for Nuxt Fonts!

[mtzrmzia]

Same issue here... any idea???