Roughly 20 years ago, changing fonts was the only way to distinguish your website from any other. There weren’t design trends based on functions, unique menus to navigate and design, or stylish colors to display throughout the page - there were fonts. While web pages have evolved since then, different fonts are still an effective means of turning boring content into an attractive design. You might not realize it, but fonts are great for brands and the designers who create them to distinguish themselves in their market. Chances are you can identify the Coca-Cola or Disney fonts, even when they’re used to spell different words. Some fonts are iconic, some are downright ugly, but almost all of them are a creative way to stylize your websites.

So how do you know which ones to use? You find inspiration.

Most artists get their inspiration from other pieces of art, and that’s okay. The same can be said for web design choices, especially fonts. We’ve all scrolled through web pages filled with aesthetically interesting sections that were either inspired by major trends or inspired those major trends. Whether you’re trying to get an idea for your own brand, or you’re just curious, it can be a huge help to identify the different fonts you come across. Some you’ll want to use, some you’ll want so you can take inspiration, and some you’ll want to avoid.

To make sure you have every creative tool at your disposal, here’s a guide on how to identify the different fonts on websites (and even images).

Using Browser Development Tools

Unfortunately, discovering the fonts on any given web page takes more than a simple Copy / Paste. While that function remembers the highlighted text, it doesn’t recognize what font was used, so you’ll have to go a couple of steps further. The first solution is to use the available developer tools on whatever browser you’re using. Here’s a step-by-step process to help you through it!

Chrome

  1. Right-click on the page element/section with the fonts you want to identify
  2. Scroll down the menu and click “Inspect” to open the dev tools
    1. You’ll see the panel open a section called “Elements” on the top of the panel
  3. On the bottom of the panel, change the subsection from “Style” to “Computed”
  4. Scroll down to the bottom of the “Computed” sub-section
  5. Under “Rendered Fonts,” you’ll find the PostScript name and the “font-family” from which it’s derived

Firefox

  1. Right-click on the page element/section with the fonts you want to identify
  2. Scroll down the menu and click “Inspect” to open the dev tools
    1. You’ll see the panel open a section called “Inspector” on the top of the panel
  3. On the bottom of the panel, change the subsection from “Rules” to “Fonts”
  4. You’ll then see the “Fonts Used” on the bottom section of the panel

Safari

  1. Use your cursor to highlight the section of text with the fonts you want to identify
  2. Ctrl-click the highlighted section and then click the “Inspect Element” option
  3. “Web Inspector” then appears at the bottom of the window, then:
    1. Select the “Styles” checkbox
    2. Select the “Computed” checkbox
    3. Select the “Show All” checkbox
  4. Then click to expand the “Properties” section
  5. The font family for the highlighted text will appear

CSS

  1. Right-click on the page
  2. Scroll down and click “View Page Source”
  3. Then hit Ctrl-F and type “font-family”
  4. The different font families will then appear next to the highlighted section

Browser Extensions for Font Identification

If you’re looking to save yourself from staring at source code, there are some simpler options for you to use. Browser extensions can be extremely useful for a number of reasons, and font identifiers are no different. Here are just a few you can download right now.

Fontanello

With just a simple click you can get font information, weight, size, color, and several other unique details.

Font Ninja’s Free Browser Extension

Not only does it give you access to thousands of different fonts, but when you highlight the text on a page the extension will immediately identify the fonts.

WhatFont

Possibly the simplest extension of them all, WhatFont promises that identifying different fonts “should be just a click away” and they deliver on that.

For anyone who doesn’t want to have to sift through code and panels to get font information extensions like these are a game-changer. There’s nothing more convenient than turning a multi-step process into a single one, and that’s exactly what WhatFont can do for you. For mobile users though, that’s not always an option, and that’s where an app or two can come in handy.

Mobile Apps for Font Recognition

No one wants to open their laptop or power on the desktop to identify a font or two. While browser extensions can make it a one-click process for PC users, what are mobile users going to do? Download an app, of course! The most notable font identification app can be found on both the App Store and the Google Play Store.

Let’s walk you through one of the most popular options on the market.

WhatTheFont

WhatTheFont is one of the more versatile font identifiers out there. Not only can you identify content on your phone, you can identify any font you photograph. If you don’t want to use one of the above extensions, you can just take a picture of your monitor. It’s that simple.

  1. Download the WhatTheFont app
  2. Take a photograph or screenshot of the content you want to identify
  3. Tap the specific font on the image you’re interested in
  4. The results appear

For Android users, you can also find WhatTheFont on the Play Store. When taking photos of fonts you want to identify, Google Lens can also be extremely useful, but admittedly, alternative options are slim.

Additional Tools & Software Resources

If you’re still looking for even more font identification options, there are a couple of web-based tools you need to consider.

Font Squirrel

Upload any image or screenshot to your Font Squirrel tab and get identification results in a matter of seconds, just like you would with WhatTheFont.

Identifont

Since 2000, Identifont has been helping designers with font identification. They’re considered one of the largest font directories in the world, which means the results you’ll get from it are likely more accurate than the results you’d get elsewhere. Identifont allows you to use different descriptors to identify fonts. So if you have an idea of what it looks like, but not an example, this is the perfect option for you.

For anyone searching for obscure or custom fonts, Identifont can also help find similar examples. You might not be able to find the exact “Coca-Cola” font, but you’ll find one that’s pretty close. When it comes to design, thievery is also a form of flattery. Get creative with new fonts inspired by your favorite pages and content and you might end up creating the kind of content that inspires the next designer.