Enable/disable lazy loading of web fonts and icons

Web fonts are a great way to add beautiful typography to a website. There are hundreds of free and licensed fonts available on the platforms such as Google Fonts, Adobe Fonts, and many more. These platforms host the font which can be directly used on any webpage via CSS import or via JavaScript.

Though web fonts affect the rendering of text on a webpage, it may not be a critical piece in the first place when we talk about intelligent resource loading. A Webfont or icons font file if loaded early can introduce a delay in page rendering. On the other hand, if it is lazy loaded or deferred, the switching of fonts may not be smooth and readers may notice a flicker on the screen when the font is switched.

How to toggle web font and icons lazy loading?

If you are using RabbitLoader, most probably there are already some page rules set up in advance to control the optimization behavior. If you are not familiar with it, please read about the page rules here.

Head on to Settings->Page Rules on the RabbitLoader account page. Click on the modify button for the page rule you want to modify. If you want this new setting to be effective for the entire website, choose the ‘*’ rule.

Turn on the checkbox for “CSS Optimizations” to enable the CSS module first. Next, check the “Turn On Web Font Optimizations” to defer loading of web fonts, and uncheck it to turn off lazy loading.

After saving this rule, and purging the cache, the web font loading behavior will change as per the new settings.

Impact of fonts on page loading performance

If web fonts are lazy-loaded, obviously the webpage will load much faster even on a slow network. You can hook your visitors by engaging them with ready-to-consume content for time being while the font swapping will happen in the background once it is downloaded. The font substitution can however increase layout shift (CLS) if the initial font and swapped web font sizing and spacing are not close enough.

If web fonts are not lazy-loaded, the page rendering will slow down and the first contentful paint may get delayed. This can increase the bounce rate when visitors are not ready to wait for long enough to see anything on the screen when visiting your website.

Icon rendering issue with Safari on iOS

It is known that the Safari browser on iOS tries to substitute some Unicode characters with emojis automatically. If a web font having such characters is lazy-loaded, icons may briefly appear as emojis. Though RabbitLoader takes care of it for many common scenarios, if you are using a custom icon font on your website and face this issue, you can contact our support team with details and relevant screenshots to bring it to our notice.

Another issue could be with content blocker plugins or apps such as 1Blocker, AdBlock, Blocker X, etc, they can block the font file from loading and hence raise the same issue of showing emojis instead of icons. While in the former situation, emojis will have a short appearance, the latter one will cause emojis to display forever on a webpage.