How To Find Out What Font A Website Is Using

There are a few different methods you can use to figure out the font on any website.

Finding out what font a website is using is a helpful tool to have whether you’re a website designer or a curious visitor.

If you’ve been struggling to identify fonts, this is the only article you’ll ever need.

Once this tutorial is over, you will know how to find out what font a website is using with ease. 

Frequently Asked Questions

Before we get started, it is important to answer some of the most common questions about the topic.

What You’ll Need For This Tutorial

While finding a font does not take long, there are a few things you’ll need in order to make many of these methods work.

• Access to a web browser.
• The URL of the website or an image of the text.
• If you have the URL of the website, that is the best option to use.
  • With a URL, you can view the source code and look for the font-family property to see what font is being used. If you only have an image ofthe text, it will be a little more time-consuming.
• A computer with an internet connection.
• Browser Extension, Browser Inspector Tool, or Website That Identifies Font In Images.

Once you have the needed items, you can begin.

Find Out What Font A Website Is Using With A Browser Extension

d Out What Font A Website Is Using With A Browser Extension

Browser extensions are a quick and easy way to find out what font a website is using.

There are a lot of options we’re going to cover today.

Before we jump in, click here to watch a short tutorial on how to install browser extensions.

Find A Font Using WhatFont

WhatFont is an easy-to-install plugin.

It tells you at one click what font your website is using.

This short tutorial will walk you through how to use it. 

• Install the WhatFont extension
• Click on the WhatFont icon
  • The WhatFont icon is the “f” in the top right corner.
• Click on it when you navigate to a new webpage and you will receive information about the font when your mouse floats over any text.

Using Browser Extensions is straightforward, and I’m going to cover more options that are very similar to this one in how they are used.

Find A Font Using Fontanello

Fontanello is a catch-all browser extension that can tell you anything you need to know about a font from CSS properties to size.

Follow these three easy steps to get started with Fontanello. 

• Install the Fontanello extension
• Click on the Fontanello icon.
• It will show you the name of the font, as well as other useful information such as the size, weight, and style.

Find a Font Using FontFinder

FontFinder is a browser extension designed specifically for website developers and typeographers.

It allows anyone to analyze any part of an element or font.

The best part is that it’s just as easy to use as any other browser extension while having some more advanced abilities.

Jump into FontFinder with this easy tutorial.

• Install the FontFinder extension.
• Click on the FontFinder icon and then hover over the text you want to identify.
• The name of the font will appear in a small box.
• You can also click on the “i” icon for more information about the font, including the size, weight, and style.

Find A Font Using Font Scanner

FontScanner is an extension that is website developer and tester friendly as well.

It specifically looks at the font families it can find on a page and flags elements that don’t have the font name a developer desires.

The steps below will help you get started with FontScanner.

• Install the FontScanner extension.
• Click on the FontScanner icon. Hover over the text you want to identify.
• The name of the font will appear in a small box.

You can also click on the “i” icon for more information about the font, including the size, weight, and style.

Find A Font Using WhatRuns

WhatRuns is made for web developers, so know that when you install WhatRuns, you’re going to get more than simply information about the font.

This extension is perfect for someone building a website- it can give you information about the font as well as analytics tools and WordPress plugins.

If this sounds like it’s up your alley, you can install WhatRuns with the tutorial below. 

• Install the WhatRuns extension.
• Click on the WhatRuns icon and then enter the URL of the website you want to scan.

WhatRuns will show you a list of all the fonts used on that website, as well as other information such as the size, weight, and style.

Find A Font Using FontPicker

FontPicker is perfect if you’re not comfortable with computers and just want to know what font you saw on a website.

FontPicker is easy to install and use.

It doesn’t require any tools a web developer would have or give you any information you may not want.

Install Font Picker with our tutorial below. 

• Install the Font Picker extension.
• Click on the Font Picker icon to activate it.
• Right-click on any text and click “font details” to get more information about it such as size, weight, and style.

Find A Font Using CSS Scan

• Install the CSS Scan extension.
• Click on the CSS Scan icon and then hover over the text you want to identify.
• The name of the font will appear in a small box.
• You can also click on the “i” icon for more information about the font.

Find Out What Font A Website Is Using With Browser Inspector Tools

Browser inspector tools are a little more involved than browser extensions.

However, don’t let this scare you; browser inspector tools are easy to use, as these tutorials will show you. 

Find A Font Using The Inspect Element Tool

The inspect element tool is as simple as highlighting, right-clicking and going in the direction this tutorial points you.

It’s a quick way to find the font of a webpage without installing anything.

Follow along with our tutorial below to find out more. 

• Open the website in your web browser.
• Right-click on the text you want to identify and select “Inspect” from the drop-down menu.
• A new window will open with the HTML code for that element.
• Look for the “font-family” property and note the value listed after it. This is the name of the font.
• You can also find other information about the font, such as the size, weight, and style.

Find A Font Using Developer Tools

Have you ever loved the font on an Instagram post so much you wish you could find out what it was?

Today we’re going to introduce one tool to allow you to discover image fonts.

This is an important tool for anyone to have.

Let’s get into the tutorial.

• Open the website in your web browser.
• Press F12 to open the Developer Tools. The Developer Tools is the same tab that opens when you right-click on the text and hit “Inspect”.
• Hover over the text you want to identify and look for the “font-family” property in the Styles pane.
• You can also find other information about the font, such as the size, weight, and style.

Find A Font In An Image With Identifont

• Go to Identifont.com and click on the “Start Identifying” button.
• Upload the image of the text or enter the URL of the website where the image is located.

Identifont will show you a list of fonts that match the text in the image, as well as other information such as the size, weight, and style.

Find A Font In An Image Using The Font Squirrel Matcherator

The Font Squirrel Matcherator is a tried and true tool to uncover the image of a font.

Using it is as easy as uploading an image.

Follow along with our tutorial to discover how user-friendly this tool is. 

• Go to FontSquirrel.com and upload an image under the ” Font Identifier” tab.
• Click on the “Matcherate It” button.
• Font Squirrel will show you a list of all the fonts used on that website, as well as other information such as the size, weight, and style.

Wrapping Up

Did you enjoy increasing your knowledge of font identification on web pages?

The methods above are some of the best ways to find a font.

They’re all highly reviewed and we’re excited to give more people access to these tools in their everyday lives.

Let us know your favorite method from this article in the comments and share this article if you enjoyed it.