How to See What Font a Website is Using

How to See What Font a Website is Using is reader supported. If you follow a link on this site, then make a purchase, you should assume that we may earn a commission for your purchase at no cost to you. As an Amazon Associate, we earn from qualifying purchases. Learn more here.

There are hundreds, if not thousands, of fonts available for use on websites. If you were to see one that you would like to use on your own site, how would you know the name of it? I’ll introduce you to WhatFont, a free and easy to use tool that makes it quick work to see what font a website is using.

How to find out what font a website is using

Recently I discovered a very small glitch happening on this website. It wasn’t causing issues for visitors, but I wanted to fix it for optimization reasons.

This site uses primarily one font, but different weights, depending upon where it is used. The weight of a font is an indication of how heavy it will display. Some fonts are only available in specific weights, but variable fonts can have weights along a scale from 1 to 1000. Typically, variable fonts range from 100 to 900, or very thin to very bold.

Before I could resolve the issue, I had to find the exact location where the offending font was used.

There are other ways I could have found the font, but the simplest was to use a browser extension. Browsers have the font information available because it is the browser’s responsibility to translate the website’s code into the creator’s intended design.

Note: That is why if you’ve ever had trouble making your website display correctly, you have been instructed to clear your browser’s cache. Browsers need the most up-to-date code to display the site correctly.

That includes which fonts to use. My choice of a browser extension for this purpose is WhatFont, an extension created by Chengyin Liu.

I have no connection at all with WhatFont or its creator but it is installed on all of the browsers that I use – Safari, Chrome, Edge, and Firefox.

Note: This is not in any way a paid endorsement of the WhatFont browser extension. I use it myself and believe it could be useful to you. There are no affiliate links for the extension.

There is a different extension with similar capabilities called WhatFont – What html font. That one is offered by FontLocker and is not the same extension that I use and discuss here. It may be a fine extension, but I’ve never used it and can’t give my firsthand opinion.

How to use the WhatFont browser extension

For those who already know how to locate and install browser extensions, I’ll first tell you how to use WhatFont.

If you do not know how to locate and install extensions, keep reading. After this section, I’ll show you how to find and install WhatFont in Chrome, Edge, FireFox, and Safari for Macs and iPhones.

To use the WhatFont browser extension, first open the web page that contains the font that you’d like learn about.

Click the extension button in the toolbar. In Chrome, Edge, and Firefox, the button will be in the toolbar on the right side. If you don’t see it, be sure you have the extension pinned (set to be visible) in the toolbar.

It’s icon will be a stylized lower case f with a question mark after it (f?) on a dark background (as of the date this article was written).

In Safari on Macs, the button will be just to the left of the address bar. The button will have the stylized f and question mark, but it will be a typical Apple styled button. 

In the web page, mouse over the words that use the font that you are inquiring about. You will see a small text bubble pop up with the name of the font.

The following image illustrates the WhatFont bubble when I moused over a title on another page of this website.

WhatFont info bubble on website
Mouse over the font you want to learn about. Image illustrates the info bubble that first appears.

Click on the word, heading, or paragraph in the web page to open a larger panel containing more information.

In Chrome, Edge, and Safari, the following information will display.

  • Font name
  • Family
  • Style
  • Weight
  • Size
  • Line Height
  • Color
  • Example alphabet showing upper and lower case use
  • Source of the font
WhatFont displaying font information on website
Website font information displayed after clicking on the text.

In Firefox, the information panel will show you:

  • Font Family
  • Font Size
  • Line Height
  • Example alphabet showing upper and lower case use
  • Color (in most cases)

To close the info box, click the X in the upper right corner of the box.

To close the extension in Chrome, Edge, Firefox, or Safari for Macs, click the large Exit WhatFont button in the top right corner of the window.

WhatFont exit button
The WhatFont exit button.

How to install the WhatFont browser extension to find the name of a website font

The WhatFont browser extension is installed the same way in your chosen browser as any other extension. In the sections that follow, I’ll show you how to install WhatFont (or any other extension) in Chrome, Edge, Firefox, and Safari.

Install the WhatFont browser extension in Chrome

To install WhatFont in the Chrome browser, go to the menu icon at the far right end of the toolbar. Near the bottom of the menu, mouse over More Tools. Click on Extensions in the sub-menu.

chrome browser menu to extensions
The Chrome browser menu to Extensions.

You will be taken to your Chrome extensions management page. You should see all of the extensions that you’ve already installed.

To locate WhatFont, you’ll need to grab it from the Chrome Web Store.

In the top left corner of the extensions management page, next to the Chrome logo, click the hamburger icon menu button. It looks like three stacked horizontal lines.

After you click that button, look for Open Chrome Web Store in the bottom left corner. (Don’t ask me why Open Chrome Web Store has to be all the way down there.) 

link to chrome web store
Click the link in the lower left corner to reach the Chrome Web Store.

In the Chrome Web Store search box, type WhatFont (all one word).

As I mentioned earlier, you will see more than one extension with WhatFont spelled as one word. Choose the one by Chengyin Liu. In my search, it is the first one on the list of options. Your experience may differ.

WhatFont in Chrome Web Store
The WhatFont listing in the Chrome Web Store

Click on the extension listing. You will be given the option to install the extension in Chrome. You may also be shown a box stating the permissions granted to the extension in order for it to work.

After the extension is installed you can pin it to your toolbar.

Install the WhatFont browser extension in Edge

To install WhatFont in the Edge browser, go to the menu icon at the far right end of the toolbar. About half-way down the menu, click on Extensions.

A list of your already installed extensions will open. Do one of the following:

  1. At the bottom of that list, click Open Microsoft Edge Add-ons.
  2. Click Manage Extensions, then Get Extensions for Microsoft Edge in the left column.

Either of those options will take you to the Microsoft Edge Add-ons web page.

In the search box at the top of the left side menu, type in WhatFont.

In the results that come up, find WhatFont for Microsoft Edge. Click the Get button, and the Add Extension button that comes up next.

Install the WhatFont browser extension in Firefox

To install WhatFont in the Firefox browser, click the menu icon at the far right end of the toolbar. About half-way down the menu, click on Add-ons and Themes.

The Personalize Your Firefox page will open.

Click Extensions in the left side menu.

You will see a list of your existing Firefox extensions.

In the search box at the top of that page, type WhatFont.

There will be a few choices in the search results. The one you want is WhatFont (all one word) by Zach Michener. The listing will say, “A wrapper for Chengyin Liu’s WhatFont tool.”

whatfont is Firefox extensions store
The WhatFont listing for Firefox.

Don’t let the long name confuse you. It is the same WhatFont extension made useable in Firefox.

Click on the listing to bring up the extension’s web page. Click the Add to Firefox button to install WhatFont.

Install the WhatFont browser extension in Safari for Macs

To install WhatFont in Safari, open the Safari menu and select Safari Extensions…. The App Store will open.

Type WhatFont in the search box near the top left.

WhatFont will likely be the first result in the search. Click the Get button to install the extension.

WhatFont listing in the Apple App Store
The WhatFont listing in the Apple App Store.

To activate the extension:

  1. Go to Safari > Preferences.
  2. Click the Extensions tab.
  3. Check the box beside WhatFont.
safari preferences menu macos
Open Safari Preferences from the Safari menu.

Install the WhatFont browser extension in Safari for iOS

WhatFont is also available for Safari on iOS. You can get the extension from the App Store.

WhatFont is iOS app store
The WhatFont listing in the iOS app store.

After you install the extension on your iPhone, tap on its icon to see easy to follow directions for using it. Basically, from the webpage where you want to identify a font, select the word, then go the bottom of the screen and open the Action menu (square box with an arrow pointing upward). 

Scroll down and tap WhatFont to see a panel with info about the font in question.

If WhatFont is not an option when you open the Action menu, tap More…, then make sure WhatFont is active.

A final note about installing browser extensions

 All browsers will give some form of warning about giving the extension permission to work or telling what information the extension can access. Any extension that can read a website’s code will likely trigger such warnings. It is necessary to read parts of a website’s code in order to tell you the fonts that are being used. 

Most browser extensions carry some form of warning, but that does not mean the extension is necessarily dangerous or that its creators have an ulterior motive.

As always, if you are uneasy about accepting the warnings, do not install the extension. Your computer’s security is your responsibility.

About the author:

Tom Buford

About the author:

Tom Buford

Tom Buford - writer at
Tom Buford - writer at logo

We proudly use MediaServe to host this website.

We do our best to provide accurate information. We cannot, however, be held responsible for any loss of data or any other damages incurred by any user or visitor to this website and accept no liability arising from the use of any information contained on this website.

Compensation Disclaimer: provides its content free of charge. To help us do that some links on this page or any other throughout this website may be “affiliate links.” This means if you click on the link and purchase the item, may receive a commission at no cost to you. You’ll find more info in our Compensation Disclosure here.

As an Amazon Associate earns from qualifying purchases.