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 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
- 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.
- 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.)
- 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.
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:
- Download the image from the site (using right-click > “Save Image As” or another method), and upload it into the Matcherator interface.
- 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.)
- 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!
33 Responses
Comments
Thank you!
OMG! This was SO HELPFUL!!! Thanks so much!
You´re The MAN!!! Thanks so much!!!
Brilliant and simple explanation.
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
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 differentVery helpful! Thank you very much.
Your post is simple but very helpful! I never thought determining the font of the website is easy like that. Thank for sharing.
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)
Now I know where to look and what to look for. Thank you!
nice post
Great post! Thank you.
Very easy to follow and helpful! thanks 🙂
Thank you Fred 😉
This was awesome thanks
What if there is a list of fonts, for example “font-family: Merriweather, Georgia, Times, serif;”? Which of those is it actually using?
I’m confused don’t know which font to use
This page really helped, because I know some websites that I want to copyThanks a lot
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.
Which Font Should I Use for My Web Page?
which font is good to load the website very fastly? when i check my website on gtmetrix and pingdom it says increases request time.
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.
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.
“There’s an awesome thing for this, and it’s called Font Squirrel Matcherator.” Is this “thing” a plugin, a browser plugin, website.. ?
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.
Thanks Sir, Your article helped me to change the fonts of my website
Your site design and fonts is very beautiful. your post helped me find the font of the blog used and also the themes.
You’re very welcome, Amit!