Local Fonts – Optimize Local Fonts
Table of Contents
After saving your changes and running the optimization (Save & Optimize) the Optimize Local Fonts section will be populated with detected Google Fonts:
Font Family and Stylesheet handle
The first row of every section contains the stylesheet handle, which is stated by the theme and/or plugin developer.
On the next row, the first column contains the name of the Font Family (e.g. Jost, Martel, Roboto, etc.) followed by a few mass actions. These will help you to configure the stylesheet quicker.
Style
Displays the style for a font variation, e.g. italic or normal.
Weight
Displays the weight of a font variation, e.g. 300, 500 or 700.
Load Early (remove FOUT and improve LCP)
Check this box to preload this font variation. Preloading a font file will result in the file being loaded before everything else is loaded and will remove the Preload key requests optimization suggestion on Google PageSpeed Insights, effectively increasing your score.
Properly configuring font preloads will reduce Cumulative Layout Shifting by removing FOUT (Flash Of Unstyled Text) and will help eliminate render blocking resources.
As of v4.1, OMGF Pro includes a feature, called Smart Preload, which automatically detects which fonts should be preloaded i.e. loaded early. If digging through Developer Tools, etc. is above your level of expertise, consider upgrading to save yourself a ton of time and worries.
Don’t Load (improve Page Weight and Speed Index)
Check this box to not load this font variation. If the font variation is not used anywhere, but still loaded (by e.g. a plugin) it is advised to not load (unload) the font using this option. When all boxes of one stylesheet handle are checked, the stylesheet will not be loaded at all.
IMPORTANT! Unloading fonts that are still used somewhere will result in System Fonts being displayed. Make sure you know what you’re doing before using this feature.
Fallback Font Stack (Only available in OMGF Pro — default: none)
OMGF Pro features 31 available fallback system font stacks to reduce Cumulative Layout Shifting caused by Google Fonts. (List with visual examples, coming soon…)
Use the Font Style Matcher to find a system font which matches closely with your Google Font. This will improve User Experience (UX) and reduce CLS when configured correctly.
Replace (Only available in OMGF Pro — default: off)
In addition to configuring a Fallback Font Stack to “back up” your Google Fonts, you can replace Google Fonts with system fonts entirely! Besides completely eliminating CLS caused by fonts, this will reduce your page size and effectively, page loading time.