Whether you love the design or just love the look of a particular website, knowing what type of font the site uses and its size can help you emulate it or use it on your own website. There are several ways to achieve this, and I’ll show you a few here. So if you want to check the font type and size on a website, read on!
With literally millions of fonts available, finding the perfect one can take longer than you expect. When you spot a good one, you need to find out what it is right away, or you could lose it for good. If it’s a particularly good font, you can use it on your own website, as an Office font, or in Windows depending on what type of font it is. Just be sure to keep in mind that some fonts are copyrighted and not available for public use.
Checking the Font Type and Size on a Website
There are several ways to check the font type and size on any website. The easiest method uses the browser itself, while others use third-party tools to identify page assets. I’ll cover both types. First, we’ll focus on the built-in browser method.
- Right click on the page you like the look of and select Inspect element (Firefox), Inspect (Chrome), or F12 development tools (Edge).
- To select Inspector (Firefox) or Calculated (Chrome) in the new windows at the bottom and scroll down to the right until you reach Character font or font size. It should display the font family, the specific font used, its size, color, and whatever the page defines.
Different CMS and different web designs display their font information in different ways. Try this method on a few web pages and you will probably see different ways of setting the fonts.
Third-party tools to identify font type and size
There are a few third-party add-ons that work either as plugins or bookmarklets and can identify font types. They work with most browsers including Safari, so you should find something you can work with without too much hassle.
Firebug was a developer-only debugging tool for Firefox. It has become so popular that it is now browser independent and will work with most browsers. It’s an incredibly versatile tool that can check any element on a webpage, including the font.
- Just install the add-on as you normally would, highlight some text on the page, click the HTML tab in Firebug, then click “Calculated” on the right. Firebug should then highlight the font name, font family, size, weight, and whatever else you need to know.
However, keep in mind that Firebug was discontinued as of 2017. Older versions can still be downloaded, but they will no longer be updated, and Firebug will likely lose functionality as browsers evolve.
WhatFont is a bookmarklet that can identify fonts on web pages. Drag the bookmarklet to your bookmarks bar and use it to identify almost any font, anywhere. Its use is free and very simple. Go to a web page you like, click on the bookmark, and hover over the font you want to identify. A small black box appears above, telling you the font.
As it was updated, it even became compatible with associated add-ons.
Again, depending on how the CMS is set up or how the page is designed, this will either be a simple font ID or a full box showing you size, color, weight, etc. .
There are many bookmarklet-like add-ons that can identify fonts; WhatFont is just one of them. Are you using one? Has this article convinced you to try a new one? Let us know below.