feat(fonts): granular preload

[florian-lefebvre]

Changes

• Requested on the Stage 3 RFC
• Until now you only had the ability to preload all or nothing for a given family
• With this PR, it's now possible to filter based on weight, style and subset

Testing

• Added unit test for renderFontWeight
• Updated the orchestrate unit tests to verify we collect the weight/style preload data
• Tested manually
• Updated the fixture test to check filtering works

Docs

• Changeset
• feat(fonts): granular preload docs#12572
• RFC

[changeset-bot]

🦋 Changeset detected

Latest commit: fe4bcce

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq]

CodSpeed Performance Report

Merging #13826 will not alter performance

_{Comparing feat/fonts-granular-preload (fe4bcce) with main (6cdade4)¹}

Summary

✅ 6 untouched

Footnotes

1. No successful run was found on main (460810b) during the generation of this report, so 6cdade4 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[pkg-pr-new]

astro

npm i https://pkg.pr.new/astro@13826

@astrojs/cloudflare

npm i https://pkg.pr.new/@astrojs/cloudflare@13826

@astrojs/netlify

npm i https://pkg.pr.new/@astrojs/netlify@13826

@astrojs/node

npm i https://pkg.pr.new/@astrojs/node@13826

@astrojs/vercel

npm i https://pkg.pr.new/@astrojs/vercel@13826

commit: 3fb4e63

[jonasgeiler]

Seems to be working perfectly for me! Thanks a lot for working on this!

[JusticeMatthew]

Testing this out now, currently I have a single font preloaded with 1 style and 1 weight

<Font cssVariable="--astro-barlow-normal" preload={[{ weight: 400, style: "normal" }]} />

However, I am still showing the following in my dev tools (the font is actually being used as well):

[florian-lefebvre]

Is the repo public? If not a minimal repro would help, it's basically impossible to guess just from this

[JusticeMatthew]

https://github.com/JusticeMatthew/fonts-repro

[florian-lefebvre]

I cloned the repo locally and I don't get any warnings in the console (tested on Brave and Firefox)

[JusticeMatthew]

Hmm wonder what the discrepancy is? I'm also using firefox and experienced the exact same thing I posted images of (3 unused preload warnings and 3 network requests) 🤔

Even in incognito I still get it

[hkbertoson]

I just tested this in Firefox and I get the errors.

And it also seems to be using the 700 weight when its set to use the 400.

I did some more digging and I think this may just be a bug for preloading fonts in Firefox itself.

https://bugzilla.mozilla.org/buglist.cgi?quicksearch=Preload+Fonts

[florian-lefebvre]

Issue was that by default several subsets are loaded. Adding subsets: ['latin'] solved it!

[JusticeMatthew]

And to further clarify the font-weight was wrong because I didn't apply one via the CSS in my minimal repro

That is also working correctly now too 👍

Awsome work @florian-lefebvre !

[jyasskin]

It would be nice to support preloading certain subsets, but still making the other subsets available in case I use a rare character in one page. My brief testing seemed to show the subsets property emitting just those @font-face rules, in addition to only emitting those preloads.

[florian-lefebvre]

Good idea! Unfortunately, we currently do not have access to the subset for each link but that may become possible if unjs/unifont#242 is approved

[ascorbic]

It would be good to explain in the changeset the behaviour with variable fonts

[ascorbic]

I'd trim both before all of these, because a stray leading or trailing space could mess up the logic

[florian-lefebvre]

Yeah good idea! I won't trim the target tho because it comes from the provider, so it's its responsability to handle variable weights correctly

[ascorbic]

Great!

[sarah11918]

Quick comments from me, but I've also reviewed the docs PR which will inform the changeset here, I think!

[sarah11918]

Just caught an extra code fence in the code block, but otherwise changeset LGTM! 🎉