Identify Website Fonts with the WhatFont Extension

What the WhatFont extension does

WhatFont is a browser extension that names the typeface used for text on a web page. You turn it on from the browser toolbar, point at a piece of text, and it shows the font name. Selecting the text opens a small panel with more detail. It works by reading the styles the browser applies to live HTML text. That means it answers "what font is this page text set in?" It does not answer "what font was this logo drawn with?", and that difference decides whether it is useful for logo work.

The detail panel generally covers the font family and its fallback list, size, weight, style, line height and color. Depending on how the site loads its fonts, it may also name a hosted web font service. The exact fields, supported browsers and current release behavior can change between versions. No test evidence was supplied for this article, so confirm those details on the extension's store listing before relying on a specific feature.

Using it on a page

• Install WhatFont from your browser's extension store and allow it to run on the page you want to inspect.
• Open the page and click the extension icon to activate it.
• Hover over a heading, navigation item or text wordmark to see the font name.
• Click the text to open the detail panel, and note the family, weight and style.
• Turn the extension off when you are finished so it stops overlaying the page.

Why the reported name needs checking

Websites declare fonts as a priority list in CSS. The browser uses the first font in the list that it can load, and if loading fails it falls back to the next one.

font-family: "Brand Sans", "Helvetica Neue", Arial, sans-serif;

The first name is the font the designer requested, which is not always the font on screen. Check whether the tool is showing the declared list or the font the browser actually rendered. Also note that a self-hosted font can be registered under any name. In the example above, "Brand Sans" could be an internal alias for a commercial typeface, a custom cut, or a modified version of a retail font. Treat the reported name as a lead. Then compare distinctive letters such as a, g, R and numerals against the foundry's specimen.

What it can and cannot read in a logo

Logo as it appears on the site | What WhatFont can report | Better route

Wordmark set as live HTML text styled with CSS | Font name and styling | WhatFont works; verify the name as described above

Raster image (PNG, JPG, WebP, or an image used as a CSS background) | Nothing; pixels carry no font data | Brand guidelines, or an image-based font matcher used as a starting point

SVG with lettering converted to outlines | Nothing; the letters are paths, not text | Brand guidelines or specimen comparison; the original font cannot be recovered from the outlines

SVG containing live text elements | Behavior not confirmed by supplied evidence | Inspect the SVG source or browser developer tools for a font-family attribute

SVG file that only wraps an embedded raster image | Nothing | Treat it as a raster image; the .svg extension alone does not mean editable vector paths

Downloadable PDF, EPS or AI file | Outside the web page, so out of scope | Open it in a vector editor and check the document font list; outlined text will not appear there

Most professionally delivered logos are outlined, so in practice WhatFont rarely names a logo's typeface directly. Even when it does, many wordmarks are custom lettering or heavily adjusted type, with altered letterforms, tightened spacing or bespoke ligatures. A matching typeface is therefore a reference, not a replacement for the official artwork. Keep in mind too that the font used for a site's headings and body copy is often the brand's companion typeface rather than the one behind the wordmark.

Assessment: where it fits in logo and brand work

Strengths: it is a quick way to document the live typography of a site without reading source code. That is useful when auditing a brand before a refresh, choosing supporting type for a logo deliverable, or giving a designer an accurate typography brief.

Limitations: it reads only live text. It inherits the naming ambiguities of CSS, provides no licensing information, and cannot show whether a typeface was modified for a logo. Like most extensions that inspect pages, it needs permission to read page content, which is worth considering before enabling it on sensitive internal sites.

• Good fit: designers and marketers identifying the typefaces a brand uses on its website, or matching companion type to an existing logo.
• Partial fit: anyone trying to name a wordmark font, since it only helps when the logo is live text.
• Poor fit: identifying fonts in image logos, outlined SVGs or downloaded vector files, or confirming whether a logo file is genuinely editable.

Identifying a font is not permission to use it

Knowing a typeface's name grants no right to use it. Fonts are licensed, and a web-font license that lets a site display text may not cover installing the font on a desktop or using it in a logo. Check the license terms from the foundry or distributor for the use you have in mind. Logos are a separate matter. Being able to download a brand's logo file does not mean you may modify the artwork or use the trademark. Those permissions come from the brand owner, usually through its brand guidelines or press resources.

Gaps in this assessment

No hands-on test results, version history, pricing or browser compatibility data were supplied. This article therefore describes how WhatFont works in principle and does not verify the current release. It also does not confirm how the extension handles live text inside inline SVG. Check the store listing for current behavior, and test it on the specific page you need before building a workflow around it.