How to Check the Font Size & Face on a Website

With literally millions of fonts out there, finding that perfect one can take longer than it should. When you do spot a good one, you need to find out what it is right there and then; otherwise, you could lose it for good. If it is a particularly good one, you can use it on your own website, like an Office font, or within Windows, depending on the type of font it is. Just make sure to keep in mind that some fonts have been copyrighted and aren’t available for public use.

Whether you’re into design or just like the look of a particular website, knowing what type of font the site uses and what size it is can help you emulate it or use it on your own website. There are several ways to achieve this, and this article will show you a few of them. So, if you want to check font type and size on a website, read on!

Checking the Font Type and Size on a Website

There are a few 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. Below, we’ll cover both types. First, we’ll focus on the built-in browser method.

1. Right click on the page you like the look of and select Inspect Element (Firefox), Inspect (Chrome), or F12 Developer Tools (Edge).
2. Select Inspector (Firefox) or Computed (Chrome) in the new bottom windows and scroll down on the right until you reach Font or font-size. It should show the font family, specific font used, its size, its color, and anything else the page defines.
   

Different CMS and different web designs display their font information in various ways. Try this method on a few web pages, and you will likely see a few different ways fonts are defined.

Third Party Tools to Identify Font Type and Size

A few third-party add-ons work either as plugins or as bookmarklets and can identify font types. They work with most browsers, including Safari, so you should find something you can work with without much trouble.

WhatFont

WhatFont is available as a website or a browser extension. WhatFont is free to use and very straightforward. Here’s what to do:

1. Locate the font you’d like to investigate. Take a screenshot of a sample (CMD + Shift+ 4 on a Mac or Windows key + Shift + S on PC). Then, head to the WhatFont website.
2. Click to upload the screenshot from your computer or drag the screenshot and drop it in the box.
   
3. Select a sample of the font. Then, click the blue arrow icon.
   
4. Scroll through the list and find the one that best matches the font you want.
   

Along with the font’s name, you also have the option to purchase it if you don’t already have it.

Depending on how the CMS is configured or how the page is designed, this will either be a simple font identification or a full box giving you size, color, weight, and so on.

Fontanello

Not to be confused with the soccer player, Fontanello is a great free browser extension that allows you to quickly and easily view the font of a site. Although it’s currently only available for Chrome and Firefox, this extension is worth downloading. Here’s how to use Fontanello:

1. Open Chrome and click Add to Chrome to install the Fontanello browser extension.
   
   
2. Open the webpage with the font you’d like to inspect. Highlight a sample of the text you like.
   
   
3. Right-click the highlighted text and then click on Fontanello.
   

In the pop-out menu that appears, you will see the font details.

Fontanello makes it quick and easy to reveal the details of the font you’d like to use.

Frequently Asked Questions

Here are some more answers to your questions about online fonts.

How do I tell what font is in an image?

Perhaps you’re interested in a certain font, but it’s part of an image. It can be difficult to determine what that particular font is. The most useful tool for this is WhatFont. By following the instructions above, you can upload the image and reveal the details of the font.

Inspecting Websites

If you don’t feel like using your browser’s developer tools to find out a website’s font, there are a lot of bookmarklet type 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.