#Webfont loader install#
#Webfont loader download#

An alternative to this experience is to show the web page text in the device's default fonts while the font-files are being downloaded. As a result, the web page can appear without text for a considerable duration. Font-files can be large and often take longer to load. The final step is to add font-display: swap or font-display: optional.Chrome, Safari, Firefox and Opera browsers hide the web page text while the font-files (in which the text has to be displayed) are being downloaded. If you still can’t find the font file, use String Locator to search for the font.

If it’s being injected by a plugin (the plugin name is usually shown in the font file), go to your Plugin Editor, select the plugin injecting the font, and view the CSS file.

SiteGround Optimizer – automatically added when web fonts optimization is on.įirst, view the problematic font file in your PageSpeed Insights report.

Asset CleanUp – supports all 5 properties under Settings → Google Fonts.

LiteSpeed Cache – supports default/swap under Page Optimization → CSS Settings → font display optimization.

Perfmatters – adds swap under Settings → Fonts → display swap.

FlyingPress – adds swap under Fonts → display fallback fonts.

WP Rocket – automatically adds swap upon installation.

OMGF – supports all 5 properties under Settings → optimize Google fonts.

Elementor – supports all 5 properties under Settings → Advanced → Google fonts load (see screenshot below).

Doesn’t work with dynamically injected Google Fonts via JS. Finds Google Fonts and sets font-display to swap.

#Webfont loader install#

Swap Google Fonts Display – install and activate.This is the best method but requires you to upload fonts and follow video instructions on the plugin page. WP FOFT Loader – uses Zach Leatherman’s method of critical FOFT + preload, then polyfill fallback to emulate font-display: optional.Swaps out font.Ĭhange Font-Display Property Using Plugins If text is still not ready, uses a system font until font is ready. This determines how browsers will handle the fonts.

The time your text is invisible is the “blocking period.” During the blocking period, you need to decide which font-display property to use. Font-Display Propertyįorces 3 second block which (causes FOIT).įallback font is shown until custom font is ready (causes FOUT).įont is invisible at first, loads fallback, then swaps when custom font is ready.įont is invisible at first, loads fallback, then lets browser decide if custom font should load based on the speed of the user’s connection. In the you can choose from 5 font-display properties. FOUT (Flash Of Unstyled Text) – when a fallback font is set but isn’t the same size as the custom font, a layout shift occurs when the fallback font is swapped with the custom font.This is penalized by PageSpeed Insights but is usually not a big deal for users if it’s under 300ms. FOIT (Flash Of Invisible Text) – when no fallback font is set, the browser hides the text while the custom font is downloading, creating a quick “flash” of invisible text.FOIT and FOUT can happen during the time your fonts are loading.

#Webfont loader download#

That’s why you may see the rest of the page download before the fonts.

Setting your font-display method to swap or optional, then preloading critical fonts loading above the fold can take just a few minutes and should usually fix this for most WordPress sites.įonts load slowly because of their large file sizes. Size-adjust lets you adjust the font size to be the same as your custom font – so there’s no shift. However, if your system font and custom font have different styling, it creates FOUT (flash of unstyled text) which results in a layout shift when the swap happens. The system font is then “swapped” with the custom font. By changing the font-display method to swap or optional, a system font is shown until the custom font is done downloading. While fonts are downloading, browsers hide the text which creates a flash of invisible text ( FOIT). Preloading fonts can also eliminate layout shifts from optional fonts. The solution is to change font-display method to swap or optional which is usually done in your cache plugin (check their documentation), by using a plugin, or by adding the font-display method in your font’s CSS. If you ran your website through PageSpeed Insights, you may see a recommendation to ensure text remains visible during webfont load.