Under the “Fonts” tab in Cache Settings inside the NitroPack dashboard, you can leverage our “Font loading strategy” feature. Properly handling font loading can prevent unwanted layout shifts and improve page load times for better user experience and overall performance.
We at NitroPack have developed two font-loading techniques to choose from:
Native (enabled by Default)
Also known as “Font Preloading technique”, it ensures fonts start loading early in the page lifecycle, reducing the chances of the "flash of invisible text" (FOIT) or "flash of unstyled text" (FOUT). By adding a preload link in the head section, you instruct the browser to fetch the font resources as soon as possible.
An example can be seen here:
<link rel="preload" href="cdn/path/to/font.woff2" as="font" type="font/woff2" crossorigin="" class="nitro-font-preload">
NitroPack does this automatically for you 💪
Onload
Similar to the previous method, however, the fonts are reconfigured to load after the onload event.
That means that the fonts will be applied to the page after its loading.
With this option, we improve the LCP and FCP metrics.
Please note that font flickering may be seen during the page load. That is valid for websites that don’t use Web Safe Fonts.
📌 If you need any assistance or have questions, you can contact our Support team using the chat bubble on the bottom right of this page.