When to preload fonts?

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

When to preload fonts?

Rishi Raj Jain

Recently, I received a great question of when to preload fonts with the package, astro-font.

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Well, the answer is not specific to the usage of astro-font but rather it’s a technical tradeoff you would want to think about.

In the following answer, it’s assumed that you’re using a library (like astro-font) that generates the fallback font for your specific font.

  • Using preload is not affected with the origin of font, whether local or over CDN.

  • Using preload is specific to the nature of your website font loads and their priority:

    • Case 1: If I have say a designer website with fonts of very specific kind and I’m okay with users seeing a fallback font (generated to match the font of your choice) I do not need to use preload. Having a fallback font allows me to get rid of layout shifts.
    • Case 2: If I have say a designer website with fonts of very specific kind BUT I’m NOT okay with users seeing a fallback font, I do need to use preload to make sure that the fonts receive higher priority on the network waterfall.
    • Case 3: If I do not have a designer website but still I want the font of my choice to be visible to users as soon as they open up the page, I’d need to use preload.
    • Case 4: If I do not have a designer website and I’m okay with users seeing a fallback font I do not need to use preload. Having a fallback font allows me to get rid of layout shifts.

If you have any questions or comments, feel free to reach out to me on Twitter.

Learn More Authenticating users in Astro with Better Auth: A Step-by-Step Guide
Authenticating users in Astro with Better Auth: A Step-by-Step Guide November 24, 2024
Astro vs Next.js: Choosing the Right Framework in 2024
Astro vs Next.js: Choosing the Right Framework in 2024 October 30, 2024
6 Essential Features Every Web Starter Kit Should Include
6 Essential Features Every Web Starter Kit Should Include October 26, 2024