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.