Whether you’re into design or just like the look of a particular website, knowing what type of font and what size it is can help you emulate 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!
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.
Check 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 from within the browser.
- 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) in the new bottom windows and scroll down on the right until you reach Font. It should show the font family, specific font used, its size, 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 addons that work either as a plugin or bookmarklet and can identify font types. They work with most browsers including Safari so you should find something you can work with.
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 powerful tool that can check any element of a web page, including the font.
Just install the addon, highlight some text on the page, click the HTML tab within firebug and then Computed on the right. Firebug should then highlight the font name, font family, size, weight and everything you need to know.
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 page, anywhere. Navigate to a web page you like, click on the bookmarklet and hover over the font you want to identify. A neat little box appears over it telling you the font.
Again, depending on how the CMS is configured or the page is designed, this will either be a simple font identification or a full box giving you size, color, weight and so on.
There are lots of bookmarklet type addons that can identify fonts, WhatFont is just one of them. Do you use one? Let us know below.