How to identify fonts from websites

Have you ever seen a font on a website that you wanted to use in a design of your own? How do you identify a font on the web and get a version for yourself? 

Identifying a font from a website doesn’t have to be an exhaustive chore. There are loads of free tools to find the mystery font's name and where to download it.

Here is a list of my best tips and resources for identifying fonts from websites using 3 methods:

  • inspecting source code
  • using a browser extension
  • using a mobile app

How to identify web fonts

Articles about identifying fonts from websites are usually geared towards web design, but there are many web fonts that also look great in craft projects.

There are browser extensions and apps that can help you, but the information you seek is usually only a mouse click away.

Use your Browser's Inspect Function to identify fonts from websites

If you see a font you like on a website, you can use the “Inspect” function built into your browser to identify it. All you need to do is highlight the text you’re targeting, right-click and select INSPECT from the pulldown menu.

How to open the inspector tool in your web browser

That will open a new panel at the bottom of your browser window. I promise, this is not scary or complicated, this window is a split screen view of the page’s source code. The information in the left pane is the source code, and the right pane shows the style elements, including font information.

What does the browser inspector look like

In the right-hand pane, there are a number of tabs across the top. The default is “Styles” but click the next tab (“Computed”) and scroll until you see the font family information.

How to find the font family name in the browser inspector window

Finally, I get the name of the font I highlighted, in this case NYT-Magslab. Not surprisingly, this font isn’t available for licensing, but I can search popular font sites like 1001freefonts or DaFont and search for other similar slab fonts.

identify the font family in the browser inspector

How to use the Inspect function in Chrome, Firefox, Safari & Edge

The previous instructions are for Chrome on a Mac, but the steps are similar in other browsers.

You can right-click on your mouse and select the Inspect (or Inspect Element) function on any browser. Or you can open the developer tools from the "View" heading in the top menu. You can also use keyboard shortcuts to open the Inspector window, although they differ from browser to browser.

How to open the INSPECT function

Chrome

Firefox

Safari

Microsoft Edge

Keyboard Shortcut

(Windows 10)

shift+CTRL+I

shift+CTRL+C

or F12

NA

shift+CTRL+C

Keyboard Shortcut

(Mac)

 shift+CMD+C

shift+CMD+C

option+CMD+I

option+CMD+C

Browser Menu (Windows 10)

Settings > More Tools >

Developer Tools

Tools > Web Developer > Toggle Tools

NA

Settings > More Tools >

Developer Tools

Browser Menu (Mac)

VIEW >

Developer >

Inspect Elements

TOOLS > Web Developer > 

Inspector

DEVELOP >

Show Web Inspector

Settings > More Tools >

Developer Tools

Cricut access has over 400 fonts specifically chosen for their appearance and functionality within Cricut Design Space

If you are looking for fonts for crafting projects, consider subscribing to Cricut Access. You will get access to 500+ fonts, 100,000 images and thousands of projects for about $10 per month.

Cricut offers a free 2 week trial with unlimited access to this huge library of creative building blocks for crafting projects of all kinds.

Browser Extensions and tools to identify Web Fonts

If the steps outlined above seem overwhelming, fear not! There are browser extensions for Chrome and Firefox that you will find helpful.

1. Fount

fount font identifier bookmarklet screenshot

Fount is a bookmarklet and not technically a browser extension, but it functions similarly. Simply go to fount.artequalswork.com and drag the Fount button into your bookmark bar at the top of the page. If you are interested in identifying a font on a webpage, click the button, then click your target font.

A small window will pop up with the Font name, size, weight and style. It also includes a link to a number of commercial font sites where you can browse or buy the font.

fount bookmarklet used to identify font from website

Fount works OK, but I found that if a site has a fixed menu bar at the top of the screen the popup window will be covered.

Also problematic is that when you click on the referral link to a commercial font site, it will just use the font name as a search term. You may not end up finding the actual font you are looking for, but another font that has a common keyword in its name.

2. WhatFont – my fave to to Identify fonts from websites

WhatFont is an extremely versatile tool that is available as a Chrome extension, Safari extension and as a bookmarklet that works with Firefox, Chrome, Safari and Internet Explorer.

The WhatFont tool gives you the font family name plus weight, size and color for any web text. The information appears in a popup that hovers over the target text (unlike Fount).

whatfont in use screenshot

Over 1 million people use the Chrome extension alone and the author has made a mobile version of this extension for iphone and ipad. The app also provides the font technical information from the site’s source code, unlike other mobile apps that use photos and screencaps to identify a font.

3. Font Finder

Font Finder lets you highlight your target text, then right click and choose between three options: analyze font details, copy font information, or replace the font with your own preferred font. It's a very popular app (118,000+ users on Chrome and Firefox) and it is available for Opera and Microsoft Edge as well.

font finder browser extension being used to identify fonts from websites

4. WhatFontIs

Popular font identifier site whatfontis.com also has a browser extension for Chrome (70,000+ users). When the extension is activated, you can either hover over the target text and get the name of the font family, or click the font and get a list of links to similar free and paid fonts.

whatfontis browser extension screenshot

This tool is handy, but unfortunately is only for Chrome browser users. If you use another browser and use the font identifier on the website, you will be prompted to use an image search, which may or may not be accurate and won’t tell you additional information like font weight or style.

How to identify a font from website using an iPhone or iPad 

All of these steps work well if you’re on a desktop or laptop computer, but what if you’re using your phone or tablet? You can open developer tools on mobile devices and see the source code, but if you can figure that out, you probably don’t need this tutorial.

Fortunately, there are apps and browser extensions that can help you identify web fonts on mobile devices. WhatFont has an iOS app that pulls font information from the website's source code, but most other font identifier apps rely on analyzing a photo of the font sample instead of reading the source code.

There are enough websites and apps that identify fonts from a photo or screenshot that we thought it would be smart to create a separate article on the topic so we could evaluate the top sites and give better recommendations instead of making this article way too long.

Click here to read our article: How to identify a font from an image or picture.

Where to find a font to download after you've ID'd it from a website

The trick to finding a font you like on the web is to find a version of it that’s also available. The example I keep using (mostly because I like the headline “I Recommend Eating Chips”) is NYT Mag Slab, which is a font owned exclusively by the New York Times and not available to users like you and me.

I can search Google for this font, but I will save myself time by searching for bold Slab style fonts at big font repositories like DaFont. There will certainly be similar fonts that will do the job that are either free or cheap to license for commercial projects.

We have a list of what we think are the best sites to find free fonts for Cricut and Silhouette projects here, along with instructions on downloading and installing fonts.

Read more:

Cricut access has over 400 fonts specifically chosen for their appearance and functionality within Cricut Design Space

If you are looking for fonts for crafting projects, consider subscribing to Cricut Access. You will get access to 500+ fonts, 100,000 images and thousands of projects for about $10 per month.

Cricut offers a free 2 week trial with unlimited access to this huge library of creative building blocks for crafting projects of all kinds.

Leave a Comment