How to See What Font a Website Is Using

You are looking for design inspiration, land on a site, a headline stops you, and you want that typeface for your own project. The name is usually one right-click away, and your browser will also tell you the exact weight, the file it loaded, and whether you are free to use it.

We’ll show you how to find the font name and all the relevant details in five ways, using GitHub’s homepage as an example, including what to do when the type exists only in an image.

How To See What Font A Website Is Using (5 Available Methods)

Every example below uses the headline on GitHub’s homepage. It is set in Mona Sans, a variable font that GitHub hosts itself, which makes it a good test of what each method can and cannot tell you.

1. Identify Fonts Using The Browser Inspector Tool

The quickest check is your browser’s inspector. The steps below use Chrome, and Edge, Brave, and Opera share the same developer tools, so they work there too.

Right-click the text whose font you want to identify, then select Inspect:

To open the same tools from the keyboard, press Ctrl+Shift+C on Windows or Linux, or Cmd+Shift+C on a Mac, then click the text.

DevTools opens with that text’s HTML element selected. Hover over the selected line, and Chrome outlines the element on the page, which confirms you picked the right one:

Next, open the Computed tab and type font-family into its filter box:

That value is the site’s font stack: the font it wants first, then fallbacks for any device that cannot load it. GitHub’s headline asks for “Mona Sans”, followed by seven fallbacks.

A font stack is a list of preferences, not a result, so it cannot tell you which font the browser drew. For that, clear the filter and scroll to the bottom of the Computed tab to find Rendered Fonts. It names the font file in use and how many glyphs came from it:

Here, it reads Mona Sans VF from a network resource, which is a different name from the “Mona Sans” in the CSS. VF stands for variable font, and that is the file GitHub serves.

The Styles tab shows the CSS rules behind these values. It also lists every overridden rule, so Computed is the fastest place to read the answer.

2. See Every Font On The Page With Firefox’s Fonts Tab

Firefox’s Inspector has a dedicated Fonts tab, and Chrome has no equivalent. It shows the rendered font, where it came from, and, for a variable font, every adjustable setting in one panel.

Right-click the text in Firefox, choose Inspect, then open the Fonts tab in the Inspector’s sidebar. Fonts Used shows the family the element is set in and, beneath it, the exact font rendering it:

For GitHub’s headline, that is Mona Sans, rendered from Mona Sans VF. Chrome gives the same answer, but at the bottom of its Computed tab.

Expand All Fonts on Page to list every font the page uses. Each entry has a preview, the URL the file loaded from, and details stored inside the font, such as its version, designer, and license:

Read the license line before you reuse a font. Mona Sans is published under the SIL Open Font License, which allows you to use it on your own site.

A variable font packs adjustable axes, such as weight and width, into a single file, so a site can use any value along a range. When the selected element uses one, the Fonts tab adds a slider for each axis, set to the value the site chose. GitHub’s headline has three: Width, Weight, and OpticalSize, with Weight set to 425.

Drag a slider, or type a value next to it, and the page updates live. Setting Weight to 860 makes the headline visibly heavier:

The Fonts tab shows the exact axis values and the font name. Divi 5 exposes the same axes in its own font settings. We have rounded up the best variable fonts for web design, plus some variable font setting combinations to start from.

3. Read The Real Font File In The Network Tab

The Network tab lists every font file the browser downloaded. It settles the question when a site’s CSS and its files use different names.

Open your developer tools, switch to the Network tab, and click the Font filter above the request list. Then reload the page, because the list only records requests made while the tools are open. Each font appears, usually as a .woff2 file. Right-click the column headers and enable Domain to see which server sent it:

GitHub’s main file is named MonaSansVF-wdth-wght-opsz followed by a version hash, so the filename alone names the font and its three variable axes. The github.githubassets.com domain shows GitHub hosts the file itself. On other sites, fonts.gstatic.com refers to Google Fonts, and use.typekit.net refers to Adobe Fonts.

Two catches come with this method. Some sites serve fonts under hashed filenames that tell you nothing on their own, so pair those with the Rendered Fonts readout above. And a site using only system fonts downloads no font files at all. An empty list is still an answer: the page is using whatever the visitor’s device already has.

4. Find Fonts Via A Browser Extension

Browser extensions are a more straightforward way to find font details, especially if you prefer not to open the Inspector. They are faster, too.

Three popular options are:

• Fontanello: Free to use, this extension reports a font’s name, weight, style, and line height. Highlight some text, right-click, and read the answer.
• WhatFont: WhatFont shows a typeface’s name as you hover over it, and more details when you click.
• CSS Peeper: Designed with web designers in mind, this extension goes beyond type, listing the page’s colors, spacing, and assets alongside its fonts. It offers in-app purchases, so treat it as freemium rather than free.

All three have Chrome Web Store’s Featured badge, and WhatFont is the most widely installed, with roughly three million users.

Browser support is where they differ. Fontanello is published for both Firefox and Chrome. CSS Peeper is Chrome-only. The Firefox add-ons listed under the WhatFont name are third-party ports rather than the original. The most popular one has not been updated since 2019. Firefox users are better served by Fontanello or by the built-in Fonts tab above.

WhatFont is the easiest of the three for naming a font, so we’ll use it for a quick demonstration in Chrome.

Install WhatFont and click its icon in the toolbar to switch it on. Hovering over text shows the font’s name, and clicking the text opens a panel with its family, style, weight, size, line height, and color:

On GitHub, it reports Mona Sans at weight 425, an intermediate value that a variable font can render exactly. When you’re done, the Exit WhatFont button in the top-right corner switches the tool off.

5. Detect Fonts In Images

Finally, you can identify fonts used in images, including typefaces you’ve seen in logos or infographics. In our experience with font detectors, WhatTheFont is the most effective online tool for this job.

Upload the image, or paste its URL, and WhatTheFont draws a box around each word it detects. Pick the word you want and click Identify font:

It returns a list of candidate fonts, each set in your chosen word, so you can compare the shapes:

The candidates come from the MyFonts catalog, so a free font may not be among them. A crop of GitHub’s headline, set in the free Mona Sans, returned 82 candidates, led by Hilmar and Regarn. When the text is live on a web page, the browser methods above give you the exact name. For type that only exists in an image, a close match is often close enough to give you a trail to follow.

Conclusion

In this post, we covered five ways to see what font a website is using:

1. Identify fonts using your browser inspector tool.
2. See the rendered font and its variable axes in Firefox’s Fonts tab.
3. Read the downloaded font file itself in the Network tab.
4. Find fonts using a browser extension such as WhatFont.
5. Detect fonts in images using WhatTheFont.

Once you have the font’s name, the next step is using it. If you build with Divi, our guide to managing fonts and font sizes in Divi 5 covers setting a font across your site. You might also want to check which software powers a site or which WordPress theme it uses.

Do you have any questions about how to check what font is used on a website? Let us know in the comments section below!