Expand the fonts guide with variable fonts, preloading & fontData

[ArmandPhilippot]

Description (required)

We had several reports here (#13635, #13583, #13324) and on Discord about the fonts guide:

• using variable fonts is not clear enough
• because we have several pages related to fonts, available props are not easy to find (we had a single link to the <Font /> reference) and some people wants to preload their fonts
• the OG image example wasn't working

Regarding the last point, I know Florian plans to improve the API but in the meantime, I think it's a good idea to improve the documentation, because this specific use case is of interest to many people.

This PR:

• adds a new section for preloading fonts
• adds a new section for using variable fonts, with remote and local fonts
• adds a new section for fallback fonts
• expands the "Accessing font data programmatically" section to:
  • provide a code snippet that can work for both dev and build
  • provide a full working example (~20 lines added...)
  • highlight this is only an example that won't work for everyone (multiple font files, adapter output...)
• expands the FontData type description, I think this can be helpful for people using font data programmatically.

cc @florian-lefebvre (no rush, this is in draft on purpose!), feel free to comment on the changes and/or push to my branch directly if your prefer!
I know you didn't want to highlight preload but since this option is available, I think it makes sense to mention it in the guide, with the same caution.

Related issues & labels (optional)

• Closes Incorrect guide for accessing font programatically through Fonts API #13635
• Partially answer: Documentation missing on how to use variable fonts with new font API #13583
• Suggested label: add new content, improve or update the documentation

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Name	Link
🔨 Latest commit	b979e85
🔍 Latest deploy log	https://app.netlify.com/projects/astro-docs-2/deploys/69d52bfecd32730008f2614f
😎 Deploy Preview	https://deploy-preview-13650--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[astrobot-houston]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
en/guides/fonts.mdx	Source changed, localizations will be marked as outdated.
en/reference/modules/astro-assets.mdx	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[florian-lefebvre]

Looks awesome! Just one comment

[yanthomasdev]

Amazing work here, two small suggestions from me so far.

[ArmandPhilippot]

Because the suggestions couldn't be applied (I don't know what happened with dbb79ed... The entire file was considered modified), I just pushed three new commits with what we discussed:

• Local provider/Other providers (with local first), including some rewording (5b5e788)
• Preloading fonts as an h2 (8c29de7)
• Reword the Satori code snippet introduction to add a new link... I used my last suggestion, but if you don't like it, we can update it with a two sentences format. (c2c53b7)

[florian-lefebvre]

LGTM!

[ArmandPhilippot]

I'll wait for @yanthomasdev in case he wants to double check the new changes!

And because I just saw 5b5e788 has the same issue as the previous commit (everything seems updated...), here is what I've done in this commit in addition to rename/reorder the tabs: I shortened the first sentence in "Using variable fonts" and reworded a bit the first sentence in "Other providers".

[florian-lefebvre]

I marked 13583 as closed by this PR. This PR addresses all the docs part, the rest is code related and I'm tracking it somewhere else

[yanthomasdev]

Great work, just one final nit and it's good to be shipped 🫡

[ArmandPhilippot]

Great, two more issues closed! 🎉 Thank you both for the reviews!