Member-only story
Avoid Layout Shift By Loading Fonts This Way.
Lately, I have been building a lot of static websites as personal projects and for clients using Astro and totally loving it. I came across a website of an UX designer, built on Wix, the performance score on lighthouse, as you’d expect were not good. So, I decided to pitch my static web development service to the potential client, but before that thought of building the homepage prior to it as it wasn’t much.
While building the homepage, I used a library called ‘astro-font’ as I was eyeing on it for a while. This library is inspired by the Next.js Font Optimization and makes sure that no layout shift happens and performance remains top-notch. I can vouch for it now that I have used the library.
Now that I was done with the homepage, I started sniffing in the preview build to see what was this library doing differently that it could score this good and if I could replicate this on my personal website (I did) that is built on vanilla JavaScript. It didn’t take much time to figure out what was going on.
There are two things different about the library’s approach:
- Way the fonts are being downloaded.
