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:
- 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.
- 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.
If you don’t want to see font names anymore, just click on the extension icon again, then 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:
- Download the image from the site (using right-click > Save Image As or another method), and upload it into the WhatTheFont interface.
- 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.)
- 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!
Thank you and your site design is awesome.
Your site design and fonts is very beautiful. your post helped me find the font of the blog used and also the themes.
Thanks Sir, Your article helped me to change the fonts of my 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.
“There’s an awesome thing for this, and it’s called Font Squirrel Matcherator.” Is this “thing” a plugin, a browser plugin, website.. ?
Good question, thanks. Font Squirrel Matcherator is a simple web app, available at https://www.fontsquirrel.com/matcherator. Text updated to be more specific.
Hi Fed, may I please kniw which font are you using for the post content. I really liked this font. Thank you! ?
Sure! 🙂 It’s Merriweather.
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.
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.
which font is good to load the website very fastly? when i check my website on gtmetrix and pingdom it says increases request time.
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!
Which Font Should I Use for My Web Page?
Do a web search for “Google font pairings” and see what looks nice to you. 🙂
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
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.
What if there is a list of fonts, for example “font-family: Merriweather, Georgia, Times, serif;”? Which of those is it actually using?
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?
This was awesome thanks
Thank you Fred 😉
Very easy to follow and helpful! thanks 🙂
Great post! Thank you.
nice post
Now I know where to look and what to look for. Thank you!
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)
Your post is simple but very helpful! I never thought determining the font of the website is easy like that. Thank for sharing.
Very helpful! Thank you very much.
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
Brilliant and simple explanation.
You´re The MAN!!! Thanks so much!!!
OMG! This was SO HELPFUL!!! Thanks so much!
Thank you!
You’re very welcome, Amit!