OMGF (Pro) — User Manual
OMGF (Pro)’s settings are grouped into separate tabs. This manual goes through each of these tabs and offers an explanation what each option does and how it affects the way OMGF Pro functions.
Go to Settings > Optimize Google Fonts to open OMGF (Pro)’s settings screen.
These settings affect the fonts OMGF (Pro) downloads and the generated stylesheet(s). Below the screenshot you’ll find a rundown of each option. Once you’re done configuring, you can simply click Save & Optimize.
If Optimization Mode is set to Manual, OMGF (Pro) will immediately scan the defined URL for Google Fonts and show an overview of found fonts. In Automatic mode OMGF Pro will start capturing Google Fonts as you (and other visitors) go through the frontend of your site. The Manage Optimized Google Fonts overview will be shown (and adjusted) accordingly.
For both modes, the same logic goes: if the Google Font has been found before and the corresponding stylesheet exists, no call to OMGF’s Download API will be made.
Optimization Mode (default: Manual)
Select when you want OMGF (Pro)’s detection and optimization to take place. In most situations manual will suffice, because most WordPress sites work with a fixed set of fonts throughout the entire site.
Some websites, however, use different fonts on different pages. To reduce maintenance (and layout breaks) these website should use Automatic (only available in OMGF Pro) Optimization Mode.
Combine & Dedupe Google Fonts (only available in OMGF Pro — always on)
Merges all detected Google Fonts requests into one stylesheet and de-duplicates them. E.g. if your theme is requesting Roboto 400, 600 and 700, and a plugin is requesting Roboto 400 and 900, OMGF Pro will merge this request into Roboto, 400, 600, 700 and 900.
Font-display option (default: Swap)
Only change this if you know what you’re doing. In most situations ‘Swap’ is what you’re looking for, since it removes the Ensure text remains visible during webfont load optimization suggestion in Google PageSpeed Insights, effectively increasing your score.
Include File Types (only available in OMGF Pro — default: WOFF2, WOFF)
Fine-tune the stylesheet generated by OMGF Pro to only include files you (and your visitors) actually use. In most situations the default will suffice, because WOFF2 and WOFF is supported by 98% of browsers.
Force Subsets (only available in OMGF Pro — default: empty)
Some plugins/themes load all subsets for the fonts they’re using. This could lead to excessive load. Optimizing the subsets for your Google Fonts will help you reduce pageload.
If your site only has Western European and/or North American visitors, you will only need the Latin subset. If your site is e.g. Syrian, you only need the Hebrew subset.
Optimize fonts for logged in editors/administrators (default: on)
Only disable this when you’re customizing another theme, using WordPress’ customize feature, or using a drag-and-drop page builder.
Manage Optimized Google Fonts
After saving your changes and running the optimization (Save & Optimize) the Manage Optimized Google 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.
In the free version of OMGF the stylesheet handle defined by the theme or plugin developer is always used, e.g.
google-fonts-1. OMGF Pro merges all stylesheets it discovers, that’s why it’ll always use
pro-merged. A a unique identifier will be appended for every stylesheet it discovers in Automatic mode.
The unique identifiers are used to create separate stylesheets for each combination of used Google Fonts. If one page uses e.g. Roboto 400, 600 and 700 and Open Sans 300 and 500 then this generated stylesheet is used on every page using the exact same combination. If another page uses the same combination, but also Martel 300, then a separate stylesheet is generated to optimize deliverability.
Displays the style for a font variation, e.g. italic or normal.
Displays the weight of a font variation, e.g. 300, 500 or 700.
Preload (one of OMGF’s most important features)
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. More information
Do not load
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.
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.
These settings affect how OMGF (Pro) searches for fonts throughout your sites and how the found files are processed.
Google Fonts Processing (default: Replace)
Replace will download all detected Google Fonts in your website’s pages and serve them from a local source. Remove will remove all Fonts, forcing a browser to fallback to system fonts, which is faster, but not necessarily pretty.
Both options will increase site speed by reducing DNS lookups.
Advanced Processing (only available in OMGF Pro — default: on)
Disabling this will disable OMGF Pro’s Advanced Processing features, i.e. Safe Mode, Google Fonts Processing (Pro) and Remove Resource Hints (Pro). All other features of OMGF Pro (e.g. Force Subsets or Fallback Font Stacks) will still function.
You will want to disable Advanced Processing is OMGF was working fine, and after upgrading to OMGF Pro (some) pages contain layout breaks.
Safe Mode (default: off)
On pages containing invalid HTML elements, it might occur that OMGF Pro breaks styling while parsing the page source for Google Fonts. Enabling Safe Mode might take care of this issue. If it doesn’t, contact me.
Google Fonts Processing (only available in OMGF Pro — default: all on)
You can fine-tune OMGF Pro’s font detection by skipping certain sections of your page source. Only tweak this settings if you’re absolutely certain you don’t need it.
Remove Resource Hints (only available in OMGF Pro — default: on)
Most themes/plugins using Google Fonts, add a resource hint pointing to fonts.googleapis.com to the header of each page. Enabling this option removes this resource hint from your header.
OMGF (Pro)’s advanced settings offer ways to fine-tune its behavior and make it work with your specific configuration, e.g. when you’re using a CDN.
Do not change these settings, if you don’t know what you’re doing!
AMP handling (Only available in OMGF Pro — default: Fallback)
Decide how OMGF Pro should behave on AMP pages. Fallback makes sure that Google Fonts are loaded per AMP’s specifications, by loading them from Google’s own servers. Disable will remove the Google Fonts from Accelerated Mobile Pages altogher.
Excluded Post/Page IDs (Only available in OMGF Pro — default: empty)
In some situations you might decide to not run OMGF Pro on certain pages. Using this option, you can specify the post and page IDs of pages where OMGF Pro shouldn’t run.
Fonts Cache Directory
The folder where OMGF (Pro) stores its font files and stylesheets. In most cases this doesn’t have to be changed.
Fonts Source URL (Only available in OMGF Pro)
Use this option to modify the
src attribute of each defined
@font-face element in the generated stylesheet. When modifying this option, make sure you enter the full path to where the downloaded font files are served from.
This option makes OMGF Pro flexible enough to work with the most exotic configurations out there. Some examples:
Configure OMGF Pro to use your CDN URL
If your CDN’s URL is https://my.cdn.com and OMGF Pro’s font files are stored in /wp-content/uploads/omgf, then the value to enter here is
Configure OMGF Pro to only use the Relative Path in the stylesheet
When you’re developing a website on another server, using a different URL, it’s best to make OMGF Pro generate the stylesheet using Relative URLs. This will save you a headache when migrating the website to its production environment.
A relative path is the path defined after the domain. If your site’s staging URL is https://staging.mycooldevcompany.com and OMGF Pro’s font files are stored in /wp-content/uploads/omgf then you can configure OMGF Pro to only use relative paths while generating the stylesheet by entering the following value:
Configure OMGF Pro to serve font files from alternate paths (using e.g. Nginx/Apache rewrites, etc.)
Some security plugins (e.g. WP Hide) use obscurity to secure your WP install. This basically means making the WordPress’ folder names (e.g. wp-content, uploads, themes, etc.) unrecognizable to visitors. You can use the flexibility of the Fonts Source URL option to make OMGF Pro work with these configurations.
Let’s say your security plugin rewrites requests to
/wp-content and requests to
attachments are rewritten to
uploads and OMGF Pro stores its fonts in
/wp-content/uploads/omgf. This would mean that the path OMGF should use in the stylesheet is
Remove Settings/Files At Uninstall (default: off)
If you want to uninstall the plugin and all of it’s files and settings, check this setting and save changes, before removing the plugin.