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.
2. 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.)
3. 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.

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