feat: astro-font - optimize fonts & prevent CLS

[rishi-raj-jain]

No description provided.

[netlify]

✅ Deploy Preview for accessible-astro ready!

Name	Link
🔨 Latest commit	98966bd
🔍 Latest deploy log	https://app.netlify.com/sites/accessible-astro/deploys/662a86d6c2c252000849c430
😎 Deploy Preview	https://deploy-preview-91--accessible-astro.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 site configuration.

[markteekman]

Hey @rishi-raj-jain, I see this is still on draft, let me know when you're ready for me to take a look at it. Can you also elaborate your changes and maybe explaining the advantages of your package?

Thanks!

[rishi-raj-jain]

Hey @markteekman,

the changes would basically involve using CSS variables to use personalised fallback font generated to optimise CLS & Layout Shifts of the page caused due to fonts.

explaining the advantages of your package?

More into how astro-font is built: https://www.launchfa.st/blog/building-astro-font

Basically, it optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used.

[markteekman]

Sounds good @rishi-raj-jain, thanks for explaining! I'll look into the PR soon 😄

[rishi-raj-jain]

@markteekman

Give me a day or two, and I'll get this to completion...