Support bold & italic fallbacks with the Font Provider API

[jbasoo]

Summary

Currently all fallback text is rendered as the normal font weight. The solution for this is to set the local src of the fallback font to the specific bold/italic variants.

Background & Motivation

I asked if it was possible to set the local src of font fallbacks in the Discord support channel and as it isn't @florian-lefebvre suggested it would be good to start a discussion here. The main benefit of this strategy is that the expected readability is retained on slow connections. If the font takes a while to download then at least the user still gets correctly formatted text, which also makes it a little less jarring when the custom font is swapped in.

Goals

Either automatically generate bold & italic fallbacks for bold & italic fonts, or extend the API to allow manual assignment of the fallback local src.

[Mahatva1303]

This sounds like a very reasonable improvement. Right now, when the fallback font only uses the regular local source, bold and italic text can temporarily render with incorrect styling while the custom font is loading, which affects readability and causes a noticeable visual shift.

Automatically mapping fallback variants to their corresponding local bold/italic versions would definitely improve the loading experience, especially on slower connections. It would also make the transition to the final web font feel much smoother and more consistent.

If automatic generation is difficult because of platform/font differences, then allowing manual fallback local source assignment through the API would still be a very useful solution and would give developers more control over typography behavior during font loading.

[florian-lefebvre]

@jbasoo yeah I think it'd be good! If possible I'd prefer avoiding letting users specify there custom fallbacks.

Currently, these are the fallbacks we have: https://github.com/withastro/astro/blob/b6ee23d339311c356ad25781f62454aee289e47b/packages/astro/src/assets/fonts/infra/system-fallbacks-provider.ts#L5-L55.

Checking https://www.cssfontstack.com/ tho, it seems the only one where we could have more specific fallbacks is Arial, with Arial Black. Does that sound correct?

[jbasoo]

@florian-lefebvre Based on the font-face-name info from MDN and my testing, specifying the font's fullName e.g. "Arial Bold", "Arial Italic", "Arial Bold Italic" loads that specific local font. On my machine (Mac) and phone (Android) this works fine but I suspect that might not always be the case so we could still use regular Arial as a secondary fallback on the fallback @font-face src.

[florian-lefebvre]

Before implementing this, I'd like to have more data on the availability of these fonts. If only 50% of devices have them (vs 98% for "normal" Arial), I would not be as confident shipping this.

Also, do you know if there equivalents for others like Times New Roman?

[jbasoo]

Agreed, it might not be worth doing if it's not available on most devices. I checked my test on iOS and it worked ok too though. I believe that if a device has the Arial family pre-installed then the bold/italic/bold+italic variants should be there too, we just need to know the fullName (or postscript name) of the specific font. Arial Black is an entirely different family to Arial and doesn't have an italic at all on my OS so that probably isn't worth implementing.

I'm no font expert so I threw my local Arial Bold Italic font file into wakamaifondue to verify the name and it checks out. Times New Roman seems to follow the same naming scheme too but we'd need to check the fullName for every fallback.

I can't find documentation for all OSs but Microsoft and Apple both list the fonts and variants they include.
https://learn.microsoft.com/en-us/typography/font-list
https://developer.apple.com/fonts/system-fonts/

[florian-lefebvre]

Perfect thank you! I'll dig more later this week

[florian-lefebvre]

Tackled in withastro/astro#16908