Discover how typography renforces brand visual consistency and how WhatFont makes it possible to identify the font of any website with a single click. Complete guide for designers, developers, and webmasters concerned about their brand guidelines.
Have you ever wondered how brands maintain visual consistency across their different platforrms? The typography is one of its major pillars. In this article, we exploron how to identify a website’s fonts using WhatFont, and how to apply this knowledge to renforce your visual identity.
Why know a website’s typography?
Typography plays a crucial role in creating a storng and recognizable visual identity. Choosing the right typeface is not just a matter of aesthetics: it is also a matter of effective communication of the brand’s values and message. Poorly calibrated typography can harm readability and degrade the user experience, while well-mastered typography renforces brand image and engages visitors.
For designers and web developers, knowing how to quickly identify the font used on a website is essential: for inspiration, checking brand guidelines, reproducing a rendering, or comparing competitors’ typographic choices.
WhatFont: the go-to extension for identifying a web font
What is WhatFont?
WhatFont is a free browser extension developed by Chengyin Liu, which makes it possible to identify with one click the font used on any website. Compatible with Google Chrome and Safari (available on the Mac App Store), it supports both Google Fonts and fonts served via Adobe Typekit.
Once the extension is activated, simply hover over or click on text to get:
- The name of the font family (for example: Helvetica Neue, Roboto, Open Sans)
- The font size in pixels or em
- The weight (regular, bold, light...) and style (italic, condensed)
- The text color in format hexadecimal
- The line height (line-height) and position
How to install and use WhatFont on Chrome
- Go to the Chrome Web Store and search for WhatFont
- Click on Add to Chrome to install the extension
- Activate the WhatFont icon from the extensions bar
- Hover over any text on a web page to see the typographic information appear
- Click on text to get the full details (family, size, weight, color)
Other tools for identifying a font
Font Finder for Firefox
Firefox users can use Font Finder, an extension similar to WhatFont that displays the complete CSS properties of selected text, particularly useful for developers who want to copy CSS declarations in one click.
Native browser developer tools
All modern browsers (Chrome, Firefox, Safari, Edge) include developer tools accessible via right-click and then Inspect. The Computed (or Computed) tab reveals all the styles applied to an element, including the font family, size, and weight. This method requires no installation and offers perfect accuracy.
WhatFontIs: identify a font from an image
To identify a font found in a logo, poster, or screenshot, WhatFontIs (whatfontis.com) offers a service based on artificial intelligence. It analyzes the image and suggests the likely font along with more than 60 similar alternatives. It is the ideal complement to WhatFont, which is limited to HTML text.
WhatTheFont: AI recognition by MyFonts
WhatTheFont, published by MyFonts, is another benchmark for identifying a font from an image. Particularly effective for commercial typefaces and logos, it offers direct download of the identified fonts (often paid).
FontsinPDF for PDF documents
To analyze the fonts embedded in a PDF file, FontsinPDF is the benchmark tool. It lists all the families used in the document, which is invaluable for graphic charter redesign projects or print compliance.
Visual consistency and brand identity management
Respecting the brand guidelines
Identifying the fonts used on a website is essential to comply with or audit a brand guideline. This defines the color palette, fonts, styles, and visual elements that make up the brand identity. Good management ensures that all media — website, mobile app, brochures, social media — remain harmoniously aligned.
Creating custom typefaces
Many leading brands have their own custom typeface (custom font) developed to ensure total control over their visual identity. This approach helps them stand out from the competition over the long term and ensures immediate brand recognition, regardless of the medium. Brands like Netflix Sans, YouTube Sans and Spotify Circular illustrate this trend.
Choosing the right font for your website
Selection criteria
An effective font for a website must meet several criteria:
- Legibility on all media (desktop, mobile, tablet) and at all sizes
- Coherence with the brand’s tone, values, and positioning
- Performance : optimized file size so as not to slow down loading
- Compatibility with all modern browsers
- License clear (open source via Google Fonts or commercial license via Adobe Fonts, MyFonts, etc.)
The main categories of fonts
- Serif : these fonts have small extensions (serifs) at the ends of letters, giving them a classic and traditional look. Ideal for long texts and formal contexts (press, publishing, finance).
- Sans Serif : without serifs, these fonts offer a modern and clean appearance. They are favored on digital interfaces and for on-screen reading (Roboto, Open Sans, Inter, Helvetica).
- Cursives : imitating handwriting, they apport elegance and personalization, often reserved for logos or decorative titles.
- Fantasy : decorative and expressive, they add character but should be used sparingly to preserve readability.
- Monospace : widely used to display code, each character occupies the same width (Courier, Fira Code, JetBrains Mono).
Integrating typography into your website
Google Fonts and other online libraries
Google Fonts offers more than 1,500 free and open-source font families, which can be integrated in just a few lines of code via a simple tag or a CSS import. Adobe Fonts (formerly Typekit) offers a premium alternative included in Creative Cloud, with high-end professional typefaces.
The CSS @font-face rule
For maximum control and independence from external services (loading speed, GDPR, autonomy), the CSS rule @font-face allows you to host font files directly on your own server:
@font-face {
font-family: 'MaPolice';
src: url('/fonts/mapolice.woff2') format('woff2'),
url('/fonts/mapolice.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}The attribute font-display: swap is essential for Core Web Vitals: it ensures that text remains readable while the font is loading.
Frequently asked questions about font identification
Is WhatFont free?
Yes, WhatFont is completely free, available with no subscription or in-app purchases on the Chrome Web Store and on the Mac App Store for Safari.
Does WhatFont work on all websites?
WhatFont works on the vast majority of modern websites. It identifies fonts declared in CSS in the page source code. However, it may not recognize fonts encoded in SVG, images containing rasterized text, or fonts that have been intentionally obscured.
Can you identify a font used in an image with WhatFont?
No. WhatFont only identifies fonts applied to HTML text. To recognize a font in a logo, poster, or screenshot, use WhatFontIs or WhatTheFont, two tools based on artificial intelligence that analyze the image directly.
What is an alternative to WhatFont on Firefox?
On Firefox, the extension Font Finder fulfills the same role as WhatFont, with equivalent features and an interface tailored to Mozilla's browser.
How do you identify the font in a PDF?
For PDF documents, the tool FontsinPDF is the most effective. It extracts the complete list of font families embedded in the document, which is useful for graphic redesign or prepress projects.
Is it legal to use a font identified on a website?
Identifying a font is legal. Its use, however, depends on the associated license: Google Fonts are free to use, while commercial fonts (Adobe Fonts, MyFonts, independent foundries) require an appropriate usage license depending on the context (web, print, broadcast).
Need expertise for your web visual identity?
DualMedia, a Paris-based digital agency founded in 2000, supports its clients in the development of websites and mobile applications with particular attention portée to typographic consistency and brand guidelines. From UI/UX design to the technical integration of custom fonts, our teams ensure a strong and high-performing visual identity.