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 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-familyattribute. What’s listed there is the font of the element.
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.