How to find the fonts a website is using

Identifying a font on a website used to involve opening a dozen browser tabs or guessing based on the shape of a lowercase "g" or the slant of a serif. For designers, freelancers, and brand researchers, this technical detective work is a standard part of competitive analysis or moodboard creation. You see a typography pairing that works perfectly and you want to know exactly what is powering that visual hierarchy. This guide covers the two most efficient ways to pinpoint website fonts without the guesswork.

Method 1: The DevTools Workflow

Every modern browser includes a suite of developer tools that let you peer directly into the source code of a page. This is the most precise way to see exactly what the browser is doing with text, but it requires knowing where to look among thousands of lines of CSS.

To start, right-click on the specific piece of text you are curious about and select "Inspect" (or "Inspect Element" in some browsers). This opens a side panel or a bottom tray showing the HTML on the left and the CSS styles on the right. While the "Styles" tab shows you every font family listed in the code, it does not always tell you which font is actually being displayed. Websites often use font stacks, which are lists of fonts that serve as fallbacks if the primary choice fails to load.

To find the truth, navigate to the "Computed" tab within the DevTools panel. The Computed tab ignores all the theoretical code and shows you the final, calculated values the browser is using to render the element. Scroll down until you find the font-family property. This will show you the specific font name. If you scroll to the very bottom of the Computed pane in Google Chrome, you will often find a section called "Rendered Fonts." This is a gold mine for researchers because it confirms whether the browser successfully loaded the custom web font or if it fell back to a local system font like Arial or Helvetica.

If you want to see the actual files being loaded, you can switch to the "Network" tab. Refresh the page while the Network tab is open and filter the results by "Font." Here you will see a list of every .woff, .woff2, or .otf file the site requested from a server. You can see if they are coming from a third-party service like Google Fonts or if they are being hosted on the website's own server. This level of detail is useful for performance audits, but it is often overkill for a simple brand search.

Method 2: The Inspect Brand Tool

While DevTools is powerful, it is also tedious. You have to inspect individual elements one by one, and you might miss secondary or tertiary fonts used on buttons, captions, or navigation menus. If you are performing a full brand audit, you need a holistic view of the typography rather than a piece-by-piece inspection.

This is where automation saves time. You can use Inspect Brand to crawl an entire URL and extract the full brand kit in seconds. Instead of right-clicking every header and paragraph, you simply paste the URL into the tool. It scans the site's stylesheets, detects every @font-face declaration, and identifies the roles assigned to different colors and typefaces.

The tool provides a clean visual overview of the primary and secondary fonts, often categorized by their usage. It effectively bridges the gap between raw code and design documentation. For designers who are building a reference library for a client, having a single dashboard that lists the exact font families, weights, and source origins is significantly more efficient than manually documenting findings in a spreadsheet. It also catches fonts that might be hidden in CSS variables or complex nested styles that are easy to overlook in a standard DevTools search.

Where Website Fonts Actually Live

Understanding how a font is identified is only half the battle. You also need to know where that font is being pulled from. Modern web typography generally falls into one of three categories: Google Fonts, font service providers, or self-hosted files.

Google Fonts is the industry standard for free, high-quality typography. Most sites using Google Fonts will have a <link> tag in their HTML head or an @import rule in their CSS. These are easy to spot in the source code because they point to fonts.googleapis.com.

<!-- Example of a Google Fonts implementation -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

For premium typography, many professional sites use Adobe Fonts (formerly Typekit). These are usually loaded via a Javascript snippet or a CSS link pointing to use.typekit.net. Unlike Google Fonts, you cannot simply download these; they require a Creative Cloud subscription or a specific license for your own project.

The third category is self-hosting. This is common for brands with custom-designed typefaces or those who are highly focused on performance and privacy. The developer uploads the font files directly to their server and uses the @font-face rule in their CSS to tell the browser how to use them.

/* Example of a self-hosted font declaration */
@font-face {
  font-family: 'BrandCustomSans';
  src: url('/assets/fonts/brand-sans-regular.woff2') format('woff2'),
       url('/assets/fonts/brand-sans-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

When you see a self-hosted font, it usually means the brand has invested in a specific license. You can find the name of the font in the font-family string, which you can then search for on commercial foundries like MyFonts, Linotype, or Grilli Type.

Common Pitfalls in Font Detection

Even with the right tools, identifying fonts can occasionally get complicated. There are several technical hurdles that might lead you to the wrong conclusion if you are not careful.

The first major hurdle is the rise of variable fonts. A traditional font family might have ten different files for every weight and style (thin, light, regular, bold, etc.). A variable font is a single file that contains every possible variation. When you inspect a variable font in DevTools, the font-family will stay the same regardless of how "heavy" the text looks. You have to look for the font-weight property or font-variation-settings to see the specific numeric value being used. This is common with modern typefaces like Inter or Roboto Flex.

The second pitfall is the font stack fallback. As mentioned earlier, CSS allows developers to list multiple fonts. A typical line might look like this: font-family: "Brand Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;. If "Brand Sans" fails to load because of a server error or a slow connection, the browser will move to the next one in the list. If you are just looking at the code, you might think you are seeing "Brand Sans" when your screen is actually rendering "Helvetica." Always check the "Rendered Fonts" section in the Computed tab to confirm which file actually made it to the screen.

Thirdly, be aware of icon fonts. Sites often use tools like FontAwesome or custom SVG icon sets that are technically loaded as fonts. If you inspect a small arrow or a social media icon and the font name is "Font Awesome 5 Free," you haven't found a text font; you've found a glyph set. These are usually mapped to specific Unicode characters and are not intended for paragraph or heading text.

Finally, watch out for "Faux" styles. If a developer uses a font that does not have a native italic or bold version, the browser will sometimes "slant" or "smear" the regular font to simulate the style. This is known as faux italics or faux bold. It usually looks slightly distorted. If you see this, the site is likely missing the proper font files for those specific weights or styles, and you should look for the "Regular" version of the typeface to identify the true design.

Quick Close

Finding the right fonts is a mix of technical inspection and knowing which tools to use for the job. Browser DevTools give you the granular, element-level data you need for a deep dive. For a faster, broader look at a brand's entire typographic identity, automated tools are the better choice. Once you have the name and the source, you can begin the process of licensing the typeface or finding a similar open-source alternative for your own design work. Monitoring how other brands handle their typography is one of the fastest ways to improve your own design eye and technical implementation.