Skip to content

How to See What Fonts a Website is Using

If you’ve ever wondered how to see what fonts a website is using, the answer is as simple as clicking a button.

All you have to do is install a browser extension and, a few clicks later, you’ll know valuable details about a website’s fonts, such as name, family, size, colors, style, and more.

In this post, we show you how to easily learn what fonts a website is using. Follow the quick steps:

How to find what fonts a website is using

What you’ll read next is how to use the WhatFont extension in Google Chrome. If you use another browser, WhatFont has alternatives for Firefox and Safari. Font Finder is an additional browser extension if you prefer Microsoft Edge or Opera.

Without further ado, this is how to find out what fonts a website is using in the Chrome browser:

  1. Install the WhatFont browser extension by clicking Add to Chrome, then Add Extension in the popup that will appear. Once installed, click on the extension’s icon to activate it and restart the browser. You can also pin the icon to the toolbar to make it more handy.
Activate WhatFont extension
  1. Go to any website you want and hover over the fonts you’re curious about. The extension will show you the fonts’ names as you scroll the web pages. If you need more details about a particular font, you can click on it and a popup box will show up with information like size, color, family, and style.
font details in WhatFont

If you don’t want to see font names anymore, just click on the extension icon again, then Exit WhatFont.

exit whatfont

How to find out what fonts a website’s images are using

One additional twist: what if you want to see what font an image is using? For example, you may be curious what fonts are used in the site’s logo or in an infographic. In that case, your browser extension won’t be helpful.

There’s an awesome web app for this, and it’s called WhatTheFont. Here are the basics of using WhatTheFont to identify the fonts in an image:

  1. Download the image from the site (using right-click > Save Image As or another method), and upload it into the WhatTheFont interface.
  2. Use the white selection box to choose the part of the image whose font you want to analyze. (You should see the software start to put little “boxes” around things it identifies as font characters.)
  3. Click Identify font. 

The results should give you fonts that match your selected text very closely. If you suspect it’s not an exact match, then you can Google further: for example, if the returned result was Adagio Slab, google “Fonts similar to Adagio Slab” and see what comes up. The similar font listings from whatfontis.com seem to be especially helpful.

Thanks for reading, and go figure out some website fonts!

Yay! 🎉 You made it to the end of the article!
Adelina Tuca

33 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
jeffrey perez
January 11, 2022 10:37 pm

Thank you and your site design is awesome.

BloggingAtm
December 10, 2020 7:15 am

Your site design and fonts is very beautiful. your post helped me find the font of the blog used and also the themes.

Lateef kb
December 10, 2020 3:06 am

Thanks Sir, Your article helped me to change the fonts of my website

Alok Sharma
October 27, 2020 11:35 am

Hey there!, Thanks for this. I came across a site having beautiful fonts and I was trying to figure out how to know which font the site owner is using. This post has given out the Best solution so far.

arti
September 18, 2020 11:49 am

“There’s an awesome thing for this, and it’s called Font Squirrel Matcherator.” Is this “thing” a plugin, a browser plugin, website.. ?

Fred Meyer
September 22, 2020 9:39 am
Reply to  arti

Good question, thanks. Font Squirrel Matcherator is a simple web app, available at https://www.fontsquirrel.com/matcherator. Text updated to be more specific.

Pravin
October 27, 2020 2:07 am
Reply to  Fred Meyer

Hi Fed, may I please kniw which font are you using for the post content. I really liked this font. Thank you! ?

Fred Meyer
November 3, 2020 11:50 am
Reply to  Pravin

Sure! 🙂 It’s Merriweather.

Bernietorras
September 14, 2020 4:31 am

Very helpful! By the way, if you want to load google fonts from the same website, there are plugins that detect the font, download it and remove the link to google static fonts to make it go faster.

Robby
September 11, 2020 5:46 pm

Hey there!, Thanks for this. I came across a site having beautiful fonts and I was trying to figure out how to know which font the site owner is using. This post has given out the Best solution so far.

Abdullah Prem
September 2, 2020 2:24 pm

which font is good to load the website very fastly? when i check my website on gtmetrix and pingdom it says increases request time.

Fred Meyer
September 8, 2020 10:00 am
Reply to  Abdullah Prem

Hi Abdullah, good question! Using Google Fonts in and of itself won’t slow your site down much, so use whatever you like.

Where fonts do slow down a site is if you’re loading lots of them, or if you’re loading lots of different options for a single font. For example, the 100, 300, 400, 700, 900, etc. weights of each font add size to the font embed, so if you’re not using some of those weights then don’t load them. And try to keep the number of fonts you use on a site to 3 or 4 at a maximum—including icon fonts like Font Awesome.

Hope that’s helpful!

Exam media
July 26, 2020 10:37 pm

Which Font Should I Use for My Web Page?

Fred Meyer
August 5, 2020 12:35 pm
Reply to  Exam media

Do a web search for “Google font pairings” and see what looks nice to you. 🙂

imlil
April 23, 2020 3:31 pm

I’m confused don’t know which font to use
This page really helped, because I know some websites that I want to copy

Thanks a lot

Ephraim Mulilo
June 5, 2020 5:13 am
Reply to  imlil

If the website is showing you multiple fonts, for example “font-family: Merriweather, Georgia, Times, serif;” then the website you are viewing is most likely using the first font in the list.

The other fonts are there incase the browser can’t find the first font, then it’ll default to the next one and so on.

William Robertson
April 19, 2020 8:50 am

What if there is a list of fonts, for example “font-family: Merriweather, Georgia, Times, serif;”? Which of those is it actually using?

Fred Meyer
April 20, 2020 3:35 pm

Hi William, Great question. That’s called a “font stack”: It’ll try to use Merriweather, and if it can’t find that it’ll use Georgia, and if it can’t find that it’ll use Times, and if it can’t find that it’ll default all the way back to the browser’s standard serif font.

Does that make sense?

Hari Seldon
February 23, 2020 5:35 pm

This was awesome thanks

Mensis
January 16, 2020 4:25 pm

Thank you Fred 😉

Maya
January 9, 2020 9:10 am

Very easy to follow and helpful! thanks 🙂

Enes I??k
December 8, 2019 1:17 pm

Great post! Thank you.

Dharam Rajput
November 28, 2019 10:53 pm

nice post

Mikhail Nasa
November 19, 2019 9:12 am

Now I know where to look and what to look for. Thank you!

Ken
October 9, 2019 12:36 am

Sorry. Not sure what has changed. I can’t see a “Computed” tab in my inspector. Using Mac ChromeVersion 77.0.3865.90 (Official Build) (64-bit)

Rosie
September 17, 2019 8:45 am

Your post is simple but very helpful! I never thought determining the font of the website is easy like that. Thank for sharing.

MC
June 18, 2019 5:11 pm

Very helpful! Thank you very much.

supraja
May 6, 2019 6:43 am

But even when i am using the same font (which i get from my model website)in my page,i am getting the different view.
even i am pasting in word it is showing the same font name as model page font name, but the view is different

FCE.pl
April 6, 2019 8:36 am

Brilliant and simple explanation.

Sebastian
March 13, 2019 6:29 pm

You´re The MAN!!! Thanks so much!!!

Moo Lanke
February 19, 2019 10:57 am

OMG! This was SO HELPFUL!!! Thanks so much!

Ayush Raj
January 26, 2019 5:11 am

Thank you!

Fred Meyer
December 11, 2018 12:57 pm

You’re very welcome, Amit!

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

33
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...