• Home
  • About
  • Contact
Stack Diary - Helpful Advice for Web Developers
  • Home
  • About
  • Contact
Stack Diary - Helpful Advice for Web Developers
Stack Diary - Helpful Advice for Web Developers
Web Design

How to Identify Fonts from Images and Web Text

Alex Ivanovs
April 10, 2022
How to Identify Fonts
Summary » Are you intrigued by a specific font you found in an image but don’t know what it is called? We’ve all been there, some of us more often than others! Luckily, there are several ways to identify fonts, both from images but also blog posts and other web-based text. And, in this article, we will explore the most effective tools for identifying fonts on the fly.

Table of Contents
  • Let’s fire up the Chrome Developer Tools
  • WhatTheFont!
  • Type Sample
  • Font In Logo

I can’t even begin to imagine how many times I have had to look up fonts because they just look really good. I mean, fonts do a lot of the heavy lifting for making a design presentable.

And you can easily prove that by changing a particular font on a specific design, only to see it fade away into oblivion. This applies to everything, from header titles to fonts used in posters, images, infographics, and other media. Fonts are inseparable from good design.

As for me, I’m more of a web guy – so the fonts that interest me, typically come from websites. However, I’m well aware that a lot of designers also work with images on a daily basis, so this article is also going to cover the process of identifying fonts from images.

And, lastly, I’m also including a service to identify fonts from brand logos. Well, it’s more of a repository of fonts used by popular brands, which is nonetheless useful. But, first – let me show you how I typically identify fonts from articles and other websites.

Let’s fire up the Chrome Developer Tools

For me, the quickest way to find a particular font is to right-click on any text inside the page and use the Chrome Inspect tool. Here is an example:

(The same applies to Mozilla, and any other browser with in-built DevToools!).

Once you click on Inspect – a new panel will open up. Unless you’re familiar with web development, a lot of it is going to look like a bunch of jibberish. Understandable.

But, the only thing you need to do is filter the page for a specific query. And that query is font-family. It should look like this:

For the text I selected, I got a response of:

font-family: Georgia, serif, system-ui !important;

so I know that the font used is Georgia. This might differ if you select another part of the text, such as a headline. On my blog, selecting a headline gives me:

font-family: var(--nebotheme-font-heading-h1-ff,inherit);

doesn’t make a lot of sense, right?

This is simply a font being called through a CSS variable. You can hover over the text inside DevTools to see which font is being used. It’s quite simple and easy to get a hang of it.


The above approach works only with fonts found inside web text. But, as the title of this article implies – we’re also looking for ways to find fonts inside images. So, this next section is dedicated to my favorite tools when it comes to identifying fonts: be it text or photo.

WhatTheFont!

WhatTheFont

There are quite a few font identification tools for images but in my experience WhatTheFont! just blows the competition out of the park. Unlike similar tools where you have to select types individually, WhatTheFont lets you select a portion of the image and you’re set.

As someone who does a lot of design work in Figma – I tested 10 unique images I have created in the past, and WhatTheFont was successful in detecting the font in each one.

Chances are, you're going to run in a font that simply isn't recognized. This usually happens when the font used by the designer isn't even publicly available. In such a case, my recommendation is to contact the author of the photo and talk to them directly. Sometimes this is easier said than done, but you'd be surprised how helpful people can be.
Website

Type Sample

Type Sample

The Type Sample widget from Typewolf is a neat little tool that replicates a process I mentioned at the start of this article. Rather than having to go inside DevTools yourself, the Type Sample bookmarklet can do all of it automatically.

On the website, you can drag the Type Sample button inside your bookmarks bar. Afterward, you click on it and then navigate to any section or part of a web page. This will automatically fetch the used font for the specific element, and showcase its name in a separate white box – as seen in the screenshot above.

It’s a lot more efficient than using a Browser extension, too.

Website

Font In Logo

Font In Logo

Brand logos have evolved plenty in this new paradigm of web design. However, it’s still possible to come across a logo that just happens to have the perfect font.

You can browse the directory individually, or simply type in the brand name for which you’d like to find the logo font. It’s a crowdsourced effort, so the availability can be a bit sparse.

Website

Share this post:

Share on Twitter Share on Facebook Share on LinkedIn Share on Email
Written by

Alex Ivanovs

I've been working on Web projects since 2005 with a primary focus on web development and design. After spending many years on a self-taught path, I discovered a natural passion for writing and have been keeping up appearances ever since. Outside of publishing and tech in general, I love to travel the world and explore how different cultures experience their day-to-day life.
⟵

Google Discover: What Is It And How to Get Featured

⟶

10 WordPress Block Themes with Full Site Editing

Related posts:

  1. How to Fix ‘404 Error – Page Not Found’ in WordPress
  2. How to Bypass a Paywall (Articles, Blogs, etc.)
  3. How to Use CSS Math Functions: calc, min, max, clamp
Privacy Policy.
STACK · DIARY © 2022
Hosting by DigitalOcean
  • Home
  • About
  • Write for Us
  • Disclosure
  • Contact
Stack Diary - Helpful Advice for Web Developers
  • Home
  • About
  • Contact
Categories
  • Code
  • Digital Marketing
  • Tech
  • Web Design
  • Web Development
  • WordPress