in

Find out which Fonts a (WordPress) Website is using

Abstract vector created by freepik - www.freepik.com

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 uses WordPress’ global $wp_styles variable to gather all stylesheets loaded from URL’s containg googleapis.com or gstatic.com. OMGF is loaded last of all the plugins, so if (besides your theme) any other plugins are loading any Google Fonts, OMGF should be able to detect them.

This same detection method is used for both auto-detecting and removal.

Of course, some plugins and themes use unconventional methods to add the stylesheets. E.g. some plugins add a widget and instead of loading the fonts within the head or before the closing </body> tag, the paste the font’s URL right before loading the widget.

If after reading this article you figured out that OMGF wasn’t able to detect a font, please contact me and let me know which theme/plugin you’re using! If I can make OMGF compatible with it and extend its detection method, I will do that.

If that doesn’t offer a solution, you can always consider purchasing my OMGF Expert Configuration service.

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:

  1. Regardless of the OS you’re using, press F12 to open up the Developer Tools panel.
  2. Look at the top of this panel, you’ll see different tabs. Look for a tab called ‘Inspector’ (Firefox).
  3. 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.
  4. 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!

Written by Daan van den Bergh

Magento 2 Back-end Developer with a passion for trainlifting, airplane-gliding, hunting trees and creating fake hobbies.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.