You are browsing a website and see a typeface that is exactly right for your project. Clean, distinctive, professional. You inspect the element in DevTools and find font-family: "GT Walsheim Pro", sans-serif. Great -- except that font costs $400 for a commercial license. Or the font name leads to a dead end because it was loaded from a private CDN with an obfuscated filename.
Identifying fonts is a problem every designer and developer hits regularly, and the approaches range from trivially easy to surprisingly difficult depending on the context.
Identifying web fonts
The easiest scenario is a live website where the font is loaded via CSS. Open your browser's DevTools, select the text element, and look at the Computed tab. The font-family property tells you the requested font, and the "Rendered Fonts" section in Chrome tells you which font is actually being used (important when the primary font fails to load and falls back).
For deeper inspection:
- Open the Network tab, filter by "Font" type, and reload the page. You will see every font file the page loads, usually as .woff2 files.
- The filename often contains the font name:
inter-var-latin.woff2is clearly Inter. - If the filename is obfuscated, download the file and open it in a font viewer. The metadata usually contains the real name.
Identifying fonts in images
This is harder because you cannot inspect CSS. The approaches:
Visual matching services work by analyzing the shapes of individual characters -- the curvature of an "a", the terminals of an "s", the x-height ratio. They compare these features against a database of known fonts and return ranked matches.
The key characters that distinguish fonts most effectively are lowercase "a" (single vs. double story), lowercase "g" (open vs. closed), uppercase "Q" (tail style), and lowercase "e" (aperture angle). If you can isolate these characters clearly, identification accuracy improves dramatically.
Manual identification using classification knowledge works when automated tools fail. Start with broad categories:
- Does the font have serifs? (Serifs are the small lines at the ends of strokes)
- If serif: is it old-style (like Garamond), transitional (like Times), or modern (like Bodoni)?
- If sans-serif: is it geometric (like Futura), humanist (like Gill Sans), or grotesque (like Helvetica)?
- Is it monospaced? Slab serif? Display/decorative?
Narrowing to a category cuts your search space from thousands of fonts to dozens.
Common font identification mistakes
Confusing similar fonts. Arial and Helvetica are notoriously similar but not identical. The capital "G" in Helvetica has no spur; Arial's has a horizontal spur. The "1" in Helvetica has no serif at the base; Arial's does. These differences matter for brand consistency.
Ignoring font weight and style. A font at 300 weight looks quite different from the same font at 700 weight. If you identify a font based on its bold variant and then use the regular weight, it will look nothing like what inspired you.
Assuming a free version exists. Many premium fonts have free alternatives that are close but not identical. Knowing the exact font helps you find the best free substitute. For example, if you identify a heading font as Proxima Nova, you know that Montserrat is a solid free alternative with similar geometric proportions.
Building a font reference library
Over time, developing a mental library of commonly used fonts makes identification nearly instant. Start with the fonts you see most often:
- Sans-serif workhorses: Inter, Roboto, Open Sans, Lato, Montserrat
- Serif classics: Georgia, Merriweather, Playfair Display, Lora
- Monospace standards: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono
- Display favorites: Poppins, Raleway, Oswald, Work Sans
Being able to recognize these on sight covers probably 60% of the fonts you will encounter on the web.
I built a font identifier at zovo.one/free-tools/font-identifier that helps you identify fonts from images and text samples. Upload a screenshot or paste text, and it analyzes the typographic characteristics to suggest matching fonts. Useful when DevTools inspection is not an option or when you are working from a design mockup and need the exact font name.
I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.
Top comments (0)