How to See What Fonts a Website is Using

So you doing your thing browsing the web and stumble upon the slickest font combo but you can’t identify the typeface? Well in this video (and article below) I show you exactly how to find those fonts…


How to See What Fonts a Website is Using

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.

Additional Tips:

Extensions such as WhatFont (available for Chrome, Firefox and Safari) make it quite easy to detect font families of any text in a webpage. You just need to install the extension, activate it on a site and click on the element you want to inspect. The results are shown in a floating box, always in the context of your choice.

About the author

Harinder Kaur

Harinder Kaur has completed her M.tech in Computer Sc. & engg. from Kurukshetra University. She has done research on Mobile ad hoc networks as project fellow at SMVD university. She is currently working on her new startup dealorcoupons.com

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.