Whether you're into design or just like the way a particular website looks, knowing the 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 some of them 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 it should. 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 kind of font it is. Just be sure to keep in mind that some fonts are copyrighted and not available for public use.
Checking 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 will 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 (Chromium), or F12 development tools (Edge).
- Select Inspector (Firefox) or Calculated (Chrome) in the new bottom window and scroll down to the right until you reach Character font ou font size. It should show the font family, the specific font used, its size, color, and whatever else the page defines.
Different CMSs and different web designs display their font information in different ways. Try this method on a few web pages and you'll probably see different ways to set 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 trouble.
Pyromaniac
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 of a webpage, including the font.
- Simply 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 anything else you need to know.
However, keep in mind that Firebug has been discontinued as of 2022. Older versions can still be downloaded, but will no longer be updated, and Firebug will likely lose functionality as browsers evolve.
WhichFont
QuelleFont 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 webpage you like, click 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 related add-ons.
Again, depending on the CMS setup or page design, this will either be a simple font identification or a full box telling you the size, color, weight, etc.
Fontanello
Not to be confused with Football Player, Fontanello is a great free browser extension that lets you quickly and easily view a site's font. Although currently only available for Chrome and Firefox, this extension is worth the download.
Website inspection
There are many bookmarklet-like add-ons that can identify fonts; WhatFont is just one of them. Do you use one? Has this article convinced you to try a new one? Let us know below.
