How to See What Fonts a Website is Using

disney font | easy google fonts

If you’ve ever wondered how to see what fonts a website is using, the answer is as simple as opening your browser inspector. Since every bit of a website is interpreted in your browser, if you know how to use your browser inspector properly you can figure out fonts, images, CSS properties, and anything else on the page.

In this video demo, we show you how to use the Chrome browser inspector to find what fonts a website is using, and even how to start playing with those fonts on a page separate from that site.

Here’s the video demo:

And here’s a text summary:

How to Find What Fonts a Website is Using

  1. Open your browser inspector. In Chrome or Firefox, you can do this by right-clicking and choosing “Inspect.” Ctrl+Shift+I (Windows) or Cmd+Shift+I (Mac) should also work.

inspect page

  1. Navigate to the element whose font you’re curious about. You can do this by either clicking “Inspect” on the element itself, or navigating to the element within the browser inspector’s document object model (DOM), its map of the nexted HTML elements that make up the site. (Pay attention to what sections of the page are highlighted as you move through the DOM.)

inspect element on page

  1. Once you’re on the correct element, navigate to the “Computed” tab in the inspector and scroll down to the font-family attribute. What’s listed there is the font of the element.

find font family of an element

Again, in addition to helping you find which fonts a website is using, the browser inspector can let you do all kinds of experimentation in any of your browser’s tabs. For details, see the video above, see our other Quick Guide on using browser inspectors, and read our full article on Chrome Developer Tools and the Chrome browser inspector.

How to Find Out What Fonts a Website’s Images are Using

One additional twist: what if the 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 inspector won’t be helpful.

There’s an awesome web app for this, and it’s called Font Squirrel Matcherator. You can read a bit more about Matcherator in our link post on it, but here are the basics of using Matcherator 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 Matcherator interface.
  2. Use the blue 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 “Matcherate It!”

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!


34 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.. ?

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! ?

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.

Exam media
July 26, 2020 10:37 pm

Which Font Should I Use for My Web Page?

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?

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.

Amine
May 31, 2020 8:41 am
Reply to  FCE.pl

You could also use the Colors and Fonts Extractor extension on Firefox
https://addons.mozilla.org/fr/firefox/addon/colors-and-fonts-extractor/

There should be also the same extension on Chrome

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!