How to Check What Font a Website Uses (5 Ways, 2026)
You spotted a headline on a site and thought, "what font is that?" Figuring out how to check what font a website uses is a common task for developers and designers, and there are several reliable ways to do it. This guide covers five methods, from a one-second hover to reading the raw font requests in the Network tab, so you can pick whatever fits the moment.
Quick answer
To check what font a website uses, hover over the text with a font inspector extension to instantly read the font family, size, weight, and color — no DevTools required. If you prefer built-in browser tools, right-click the text, choose Inspect, and read the font-family value in the Styles pane and the actual rendered font in the Computed tab. For text inside an image or logo, use a screenshot-based font detector instead.
Method 1 — Hover to inspect fonts with UI Developer Kit
The fastest way to check a website's font is to point at it. UI Developer Kit is a Chrome extension with 17 inspection tools, and its Font Checker is tool #1. You hover over any text and read its typography details in a tooltip, without opening DevTools panels or hunting through CSS.
Install and activate the Font Checker
Install UI Developer Kit from the Chrome Web Store, then activate the Font Checker from the extension popup. Some tools require a page reload after installation, so refresh the tab you want to inspect. Once it's active, the inspector follows your cursor.
Hover over any text to see font family, size, weight, line-height, and color
Move your cursor over any heading, paragraph, or button. The tooltip shows the font family, size, weight, line-height, and color for that specific element. Because it's hover-based, you can sweep across a page and compare how the H1, body copy, and captions differ in seconds.
This matters when a page mixes several typefaces. Instead of guessing, you see exactly what applies to the element under your cursor.
One-click copy the font-family stack
When you find the font you want, click to copy the value. The Font Checker copies the font-family stack so you can paste it straight into your own stylesheet:
/* Example of a font-family stack you might copy from a page */
.heading {
font-family: "Sora", "Segoe UI", system-ui, sans-serif;
font-weight: 600;
line-height: 1.2;
}
No manual transcription, no re-typing weights and line-heights from memory.
Method 2 — Chrome DevTools (Computed / Rendered Fonts)
If you'd rather use what's already in the browser, Chrome DevTools can tell you what font a website uses. It takes a few more clicks than a hover tooltip, but it's always available.
Right-click → Inspect, read font-family in Styles
Right-click the text and choose Inspect. In the Elements panel, look at the Styles pane on the right. The font-family property shows the declared stack the site asked the browser to use, in priority order.
The Computed tab and "Rendered Fonts" section
The declared stack is only half the story. Switch to the Computed tab and scroll to the bottom to find the Rendered Fonts section, which lists the font the browser actually used to draw the glyphs on screen. This behavior is documented in the official Chrome DevTools documentation. If the first font in the stack failed to load, Rendered Fonts is how you'll know a fallback is really what you're seeing.
Method 3 — Find @font-face and Google Fonts in the Network tab
Sometimes you want the source of the font file, not just its name. The Network tab shows every font the page downloaded.
Filter Network requests by "font" or "googleapis"
Open DevTools, go to the Network tab, and reload the page. Type font in the filter box, or click the Font request type, to list the downloaded font files. To check whether a site uses Google Fonts, filter for googleapis — requests to fonts.googleapis.com (the stylesheet) and fonts.gstatic.com (the font files) are the signature of a Google Fonts setup. You can then look up the exact family on fonts.google.com. The @font-face rules that reference these files appear in the site's CSS, which the Styles pane links to.
Method 4 — Identify fonts from an image, logo, or screenshot
Not all text is selectable. Logos, banners, and hero graphics are often flat images, so hover tools and DevTools can't read them because there's no font-family to inspect.
When to use a screenshot/AI font detector instead
For text baked into an image, use a screenshot-based font detector. These tools analyze the letterforms in an uploaded image and suggest close matches. They're the right choice when the text isn't real HTML text, but they give best-guess matches rather than the exact declared value, so treat the result as a lead to confirm rather than a definitive answer.
Method 5 — Font-detector browser extensions (WhatFont and alternatives)
Single-purpose font extensions like WhatFont are a long-standing way to check fonts on a website by hovering. They do one job — reveal the font under your cursor — and they do it simply.
The trade-off is scope. A font-only extension tells you the typeface, but you'll still reach for other tools the moment you want the color, the spacing, or the full computed CSS. That's the difference with an all-in-one approach: UI Developer Kit reads the font and covers colors, CSS, spacing, contrast, and export in the same extension, so you're not installing a separate add-on for each property.
Rendered font vs declared font-family: what you're actually seeing
Here's the nuance most guides skip. The font-family value is a declared stack — an ordered wish list the site hands the browser. The browser walks the list and uses the first font that's actually available. The one it lands on is the rendered font.
They often differ. A stack might declare "Proxima Nova", Helvetica, Arial, sans-serif, but if Proxima Nova never loaded, the browser renders Helvetica or Arial instead. That's why DevTools separates the declared stack (Styles pane) from Rendered Fonts (Computed tab), and why a hover inspector that reports the applied values is more trustworthy than reading the CSS alone. When someone asks "what font is this website using," the honest answer is the rendered font, not just the first name in the list.
From "what font is it" to "rebuild it": the full inspection workflow
Checking the font is usually step one, not the finish line. When you're recreating a design or documenting a competitor's page, you also need the color, the exact spacing, and the surrounding CSS — and jumping between a font extension, a color picker, and DevTools slows that down.
A single hover-based extension keeps the whole pass in one place. With UI Developer Kit you can inspect the font with Font Checker, pull the palette with Color Schema, read computed styles with CSS Inspector, measure gaps with Spacing Inspector, and confirm text legibility with Contrast Checker. When you're done, Export Reports saves the analysis as JSON or Markdown so you can hand it to a teammate instead of pasting values into a chat. That font → color → CSS → spacing → export flow is the practical difference between identifying a font and actually rebuilding what you saw.
FAQ
What's the fastest way to check a website's font without opening DevTools?
Use a hover-based font inspector extension. With UI Developer Kit's Font Checker, you move your cursor over the text and read the font family, size, weight, line-height, and color in a tooltip — no DevTools panels required.
How do I see the font, size, weight, and color of a specific piece of text?
Hover over that exact element with a font inspector, or right-click it and choose Inspect. Reading the element directly is more accurate than sampling the page in general, because different elements often use different type settings.
What's the difference between the declared font-family stack and the rendered font?
The declared font-family is the ordered list the site requests. The rendered font is the one the browser actually used to draw the text, which is the first available font in that list. Check DevTools' Computed tab under "Rendered Fonts" to see what's really on screen.
How do I tell if a site uses Google Fonts, and which ones?
Open the Network tab, reload, and filter for googleapis. Requests to fonts.googleapis.com and fonts.gstatic.com indicate Google Fonts, and you can confirm the family name at fonts.google.com.
How do I find the font in a logo, banner, or screenshot?
When the text is part of an image rather than selectable HTML, use a screenshot-based font detector. It analyzes the letterforms and suggests close matches, which you can then verify.
Can I check fonts on mobile or iPhone where there's no Inspect Element?
Mobile browsers don't offer Inspect Element, so hover and DevTools methods aren't available directly on the device. A common approach is to open the same page on a desktop Chrome browser and inspect it there, or capture a screenshot on mobile and run it through a screenshot font detector.
Is it OK to reuse a font I found on another site?
Identifying a font is fine, but reuse depends on the font's license. Check the license terms before using a font in your own project. This is general guidance, not legal advice.
Ready to check fonts — and everything around them — without the tab-switching? Install UI Developer Kit to get the Font Checker plus 16 more hover-based inspection tools in one Chrome extension, with a 14-day free trial.
Top comments (0)