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.

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 Using Firebase Realtime Database in Astro with Vue: A Step-by-Step Guide → Authenticating users in Astro with Clerk and React: A Step-by-Step Guide → Deploy Astro to AWS Elasic Beanstalk: A Step-by-Step Guide →