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:

https://www.youtube.com/watch?v=C3aooh5ODXs

How to See What Fonts a Website is Using (https://www.youtube.com/watch?v=C3aooh5ODXs)

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!