Ever stumbled upon a stunning font while casually surfing the web and thought, “I need that font!”? Whether it’s for a project you’re currently engrossed in or simply a gem for your future endeavors, you know you want to add it to your collection. But how do you go about uncovering the name and details of this elusive font?
You could embark on a tireless quest, searching through countless font libraries, growing more despondent with each passing hour. Alternatively, you could opt for a smarter approach, using some trusty methods to quickly pinpoint fonts from digital and print sources.
For the rare instances where the text is artisanal hand-lettering, which isn’t available as a standard font, there’s not much to be done. However, for all other design elements utilizing a font, you’re in luck, as there are various strategies to identify them.
Manual Sleuthing: Diving into the Source Code
While not the quickest, becoming adept at code inspection can be quite enlightening. Even if you generally favor a tool or browser extension for this task, knowing the underlying process is beneficial. The starting point? Your browser’s inspector tool.
To initiate your detective work, highlight some text on a web page, right-click, and choose ‘inspect.’ As you navigate the inspector, you’ll eventually stumble upon the ‘font-family’ attribute, which reveals the font in question. For example, locating ‘basis font’ in the code points you toward ‘Basis Grotesque by Colophon Foundry’—the font in use here.
Web browsers like Firefox and Chrome may offer additional inspection tools, like a Fonts pane or CSS overview, which neatly list all the fonts on a page. And even when font names are obscured by class or variable names, these extra features can help decipher the code.
Exploring the code inspector can unveil many of a browser’s hidden talents, so it’s worth your time. Browser developers didn’t create these features for nothing—make the most of them.
For the times when you need a quick fix without the effort, consider the alternatives below.
Streamlining with Browser Extensions
Browser extensions perform the same function as manual code inspection but without the legwork. Here’s a starter pack of extensions to fit different browsers and needs:
WhatFont
For Chrome and Safari users, WhatFont simplifies the process: click the WhatFont button, hover your cursor over text, and presto—font details at your fingertips. There’s even a Firefox-friendly version that’s slightly less informative but still handy.
Fontanello
Available for several browsers including Firefox, Chrome, and Safari in iOS, Fontanello delivers font information with a mere right-click on the text.
Fonts Ninja
Fonts Ninja not only provides the essential font details but also lets users purchase or bookmark the font, right from the browser extension.
Font Finder
The versatile Font Finder, compatible with Firefox and Chrome, serves up an analysis of a font, copies CSS styles, and offers in-place font replacement.
Rapid Font Finder
Exclusive to Chrome, Rapid Font Finder is a no-frills solution delivering just the font’s name quickly and efficiently.
If your quest involves identifying a font from a non-web source, such as an image or print material, the following tactics might be more up your alley.
Getting By with a Little Help: Leveraging Font Communities
If a simple web search leaves you empty-handed, consider seeking insights from font aficionados on type forums. Although not as prevalent as they once were, here’s a look at some of the more active communities that can pitch in:
MyFonts champions a lively What the Font forum, ready to tackle font mysteries across diverse objects and materials.
DaFont features a specialized identification board within its forum.
Seek advice from the largest typography community at Typography Guru, where queries often receive attention within a couple of days.
Reddit’s identifythisfont subreddit is another avenue, but steer clear of the typography subreddit for identification requests as they’re not permitted there.
The Adobe Community also welcomes identification efforts on its Type and Typography board.
While community members are typically up for the challenge, many questions may be redirected to automated identification tools.
Speedy Font Recognition: Online Identification Tools
Online tools allow you to upload an image of the font and return with an answer. For the best results, ensure your sample image is clear and legible, with sharp contrast between text and background. Some platforms even allow minor image adjustments to aid in identification. Here’s a roundup:
What The Font
MyFonts’ What the Font is user-friendly and provides a selection of potential fonts alongside purchasing options.
Font Squirrel
The Font Identifier by Font Squirrel goes the extra mile by providing advice to enhance identification quality and offers recommendations for unresolved cases.
Font Spring Matcherator
With an extensive font database, Font Spring also triumphs in identifying elaborate scripts and calligraphy.
What Font Is
Providing a detailed search guided process, What Font Is includes additional support through a Pro version and a dedicated forum for troubleshooting.
Identifont
A veteran in the field, Identifont adopts a unique approach by querying users about font characteristics, essentially playing a typography version of ‘20 questions’.
Summing Up Font Identification
While deducing fonts from text is more straightforward than from images or descriptions, these tools are fast advancing. Most importantly, each tool and method mentioned above provides valuable suggestions and avenues to reach an accurate identification.
