Since v2.1.0 OMGF sports a nifty new feature called Auto Detect. This feature allows OMGF to automatically find the fonts your theme is using. Together with the ‘remove Google Fonts‘ feature, OMGF makes it incredible easy to boost WordPress’ performance.
Now you little detectives must want to know how we can be sure that OMGF has detected all the fonts! Today I’ll show you how to setup OMGF’s Auto-detect feature and confirm that all fonts have been captured.
Does OMGF detect all fonts?
In short, yes, it does. More precise, yes, it should.
OMGF parses the HTML source code of your website’s pages and parses it to gather all stylesheets loaded from URL’s containing fonts.googleapis.com. OMGF waits for your theme and plugins to be loaded, so if (besides your theme) any other plugins are loading any Google Fonts, OMGF should be able to detect them.
Some plugins and themes use unconventional methods to load Google Fonts, e.g. WebFont Loader or @import statements. In that case, an upgrade to OMGF Pro is required to properly detect and replace/remove the fonts.
Which Google Fonts is my theme using?
You’ll be happy to know that figuring out which fonts your website is using is really easy. Every browser has a built-in interface to show you all sorts of information about the webpage you’re viewing, called Developer Tools.
Using Firefox
Every browser has it’s own way of showing you Typography information for a website. I personally like Firefox the most, cause it has a specific ‘Fonts’-view:
- Regardless of the OS you’re using, press F12 to open up the Developer Tools panel.
- Look at the top of this panel, you’ll see different tabs. Look for a tab called ‘Inspector’ (Firefox).
- Within the ‘Inspector’ tab, you’ll see a lot of HTML code. Underneath that section is another row of tabs, and probably the ‘rules’ tab is selected. Further down that row you’ll the ‘Fonts’ tab.
- Click on it and you’ll see the fonts used within the context of the page. If you’d like to see more information about each font (e.g. to see if they’re loaded from a local source or externally) scroll down in this section and click on the pull down menu called ‘All fonts on page’.
Finding out what Fonts a Website is using with Chrome
Chrome also has a built-in feature to find out which font it is, but since it is less user-friendly compared to Firefox, I prefer to use an extension, called WhatFont. There’s also a Safari version, if you need it.
Discussion
It is pretty easy to find out which fonts a website is using, once you know how. Every browser has its own built-in tool for it. In this post I’ve provided you with ways to figure it out in Chrome and Firefox, so you can see for yourself if OMGF detected and downloaded all fonts for your stylesheet. Know of a better/easier way? Let me know in the comments!
Your article was as brilliant as ever. We often see attractive fonts on websites. Many people want to use these fonts in their design but they do not know which font it is. Now your article solves this problem.
I appreciate the detail and clear instructions in this article, which help readers understand how to do it and learn about fonts on their websites. Font management is an important part of web design and performance optimization, and this article helps make it simpler.