First of all cheers to ‘Daan’ for creating marvelous plugins like OMGF and COAS. This plugin was the first one in WordPress to host Google fonts locally. The manual method was a bit long and complicated and this plugin saves us from all that trouble. I will be explaining the optimized aka best settings and steps on installing and configuring OMGF in this tutorial. If you want to host, preload, and optimize Google fonts, continue reading below.
- Why Do We Even Need Another Plugin 'OMGF'?
- The Limitation Of OMGF (Free version)
- Hosting Fonts From Google / Third Party Server Vs Hosting Google Fonts Locally
- What Problems Can Be Solved If You Host Your Fonts Locally?
- OMGF Tutorial | A Step-By-Step Guide On Hosting Google Fonts Locally
- GTMetrix Waterfall Results | Before Vs After Hosting Fonts Locally
Why Do We Even Need Another Plugin ‘OMGF’?
We do agree that speed is a crucial factor in SEO page ranking. One of the resources that decreases a WordPress website is the web fonts. By default, almost every theme uses Google fonts that are not present on your server but instead are loaded from Google’s server. This creates long blocking and connecting time which can also be seen in speed testing software’s waterfall such as GTmetrix and Chrome Dev Tools.
What OMGF does is that it downloads the fonts that are used by the theme in your website’s server and then loads from there. Not only does OMGF store fonts locally, but also preloads them, adds swap attributes, and also serves the fonts via CDN.
The Limitation Of OMGF (Free version)
The free version only has ‘Force’ optimization mode only which creates only one stylesheet which applies on all the pages of the website. This means that it scans only one page and stores the fonts of that page only. If you are using a different font or a page builder on other pages, they will not be stored and added to the stylesheet.
Moreover, even if a page doesn’t use the font available in the stylesheet, it will still be loaded. As a result, you might see a warning in Chrome Dev Tools for the fonts:
"The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally."
Don’t worry, this doesn’t hurt your website, speed, or even SEO.
The Pro version of OMGF allows you to create separate stylesheets for each page of your website. The pro version automatically scans all your pages and posts and creates stylesheets accordingly. Not only that, but this plugin in the pro version can also detect and combine duplicate fonts into one stylesheet. Other font and icon extensions like SVG are also supported and can be optimized.
Important Suggestion!
I would suggest that you use all the fonts and page builder on one page and when OMGF asks for the URL of the page to scan fonts, give the URL of that page.
Hosting Fonts From Google / Third Party Server Vs Hosting Google Fonts Locally
| Font Hosting | On Google / 3rd Party | Locally (on the server) |
|---|---|---|
| Speed | Poor (worst if hosting is poor) | Excellent (also depend on the hosting platform) |
| Can be Cached | No | Yes |
| Can be Preloaded | No | Yes |
| Can be Preconnected | Yes | No (there’s no need) |
| Can be served on CDN | No | Yes |
| Swap/Fallback/Block Display Options | No | Yes |
As you can see in the table above, not only does using fonts locally improve your website speed but also allows the fonts to be cached, preloaded, served on CDN, and even use the ‘Swap’ option. This isn’t possible if you are using fonts from third-party servers like Google.
What Problems Can Be Solved If You Host Your Fonts Locally?
- ‘Avoid invisible text during font loading’ or ‘ensure text remains visible during Webfont load’ Flash of invisible text (FOIT) messages are fixed
- Flash of Unstyled Text (FOUT) warning is also fixed (especially if you preload fonts)
- Slow speed is improved dramatically if you are using many fonts on a page (reduces blocking and connecting time)
- Improves user experience (how would you like your visit a website and the text changes or loads slowly)
- Google Pagespeed or other speed testers marking use the ‘swap’ attribute in fonts
OMGF Tutorial | A Step-By-Step Guide On Hosting Google Fonts Locally
Section 1 | Downloading & Installing OMGF
Step 1: Go to Add Plugin > Search for OMGF
Step 2: Download OMGF | Host Google Fonts Locally by Daan
Step 3: After downloading activate it
Section 2 | Setting & Configuring OMGF
Step 1: Go to Settings > OMGF
Page 1: Optimization Fonts
- Leave everything as it is. Just remember to choose ‘Swap‘ from the Font-Display Option.
- At the bottom, in the ‘Manage Optimized Fonts’, add your URL to the website. Try using one which you think has all the fonts which the theme is using or you can create such a page and add the URL here.
- Click Save & Optimize
Page 1: Optimization Fonts (After Save & Optimize)
- You will see that in the ‘Manage Optimized Fonts’ section, several fonts have been loaded. If you still think some of the fonts are still missing, try the ‘Empty Cache Directory’ button and add a URL to another page after the page refresh.
- Now, you need to PRELOAD the fonts which have been downloaded to your server. Luckily, OMGF allows that in its free version. Just check all the boxes under the ‘Preload’ option column.
- Click Save & Optimize
Important
If you are using any cache plugin or server-level caching, try clearing the cache after all this.
Page 2: Detection Settings
Nothing needs to be changed.
Page 3: Advanced Settings
In the free version, you can customize the folder location and name, where omgf stores the downloaded .woff files.
For Security
Try changing the default folder name to something else for better WordPress security.
OMGF & Cloudflare
If you are on the Pro version of OMGF and looking forward to hosting fonts on Cloudflare, there’s no need to add the URL of the CDN, Cloudflare by default serves fonts on its servers.
GTMetrix Waterfall Results | Before Vs After Hosting Fonts Locally
Before
After (with preload enabled)
See the drastic change. Without fonts served from a third-party server and the preloading feature ON, the connecting/blocking time decreased to almost under 5ms.
No doubt, ignoring fonts to be hosted locally is one of the most overlooked optimizations done by WordPress speed newbies and experts. Make sure to add this point to your WordPress website speed checklist. Also, it would be appreciated if you support the developer as well by purchasing the Pro version. Happy coding!