How To Find A Font From A Website

Whether you're into design or just like the look of a particular website, knowing what type of font the site is using 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 I'll show you a few of them here. So if you want to check font type and size on a website, read on!

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, as 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.

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. 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 Developer Tools (Edge).
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

There are a few third party add-ons that 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.

Firebug

how-to-check-font-type-and-size-on-a-website-2

Firebug used to be a Firefox-only debugging tool for developers. It became so popular that it is now browser agnostic and will work with most browsers. It is an incredibly versatile tool that can check any element of a web page, including the font.

Just install the add-on as you normally would, highlight some text on the page, click the HTML tab within Firebug, and then click Computed on the right. Firebug should then highlight the font name, font family, size, weight, and everything you need to know.

However, keep in mind that Firebug has been discontinued as of 2017. Older versions of it can still be downloaded, but they won't be updated anymore, and Firebug will likely lose functionality as browsers evolve.

how-to-check-font-type-and-size-on-a-website-3

WhatFont

WhatFont is a bookmarklet that can identify fonts on web pages. Drag the bookmarklet onto your bookmarks bar and use it to identify almost any font, anywhere. It's free to use, and very straightforward. Navigate to a web page you like, click on the bookmarklet, and hover over the font you want to identify. A little black box appears over it, telling you the font.

As it's been updated, it's even been made compatible with related add-ons.

Again, 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 the download.

Inspecting Websites

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.