How to Find Out What Fonts (and Colors) a Website Uses
Five ways to identify the exact fonts a website uses — plus how to pull its colour palette, tell self-hosted from Google Fonts, and stay on the right side of licensing.
Ever admired the typography on a site and wanted to know exactly which font it uses — or wanted to capture its colour palette for inspiration? Both are quick to find once you know where to look. The fastest answer is to inspect the text and read the rendered font-family, but there are better tools for the job and a few subtleties worth understanding. This guide walks through five reliable ways to identify any site's fonts, how to pull its colours, and how to tell self-hosted fonts from Google Fonts or Adobe Fonts.
This is a focused companion to the broader how to find out what a website is built with; here we zoom in on the design layer.
Why it is worth identifying fonts and colours
Typography and colour are the core of a brand's visual identity, so reading them has real uses. Designers build mood boards and match an existing look. Developers recreate or audit a design system. Brand and marketing teams check consistency across pages or against guidelines. And anyone doing a competitive or inspiration review wants to capture the exact typefaces and palette rather than eyeball them. The good news: browsers expose all of this, because fonts and colours are just CSS the page already sent you.
There is a practical payoff to getting it exact. Guessing a typeface as "some geometric sans" might cost you hours of trial and error, whereas reading that it is, say, Inter at 600 weight lets you reproduce the look in minutes. The same is true of colour: a screenshot eyedropper can be thrown off by image compression and anti-aliasing, while the value in the CSS is the real, intended hex. A minute of inspection beats an afternoon of approximation.
Method 1: Read the rendered font in DevTools
The universal method works in any browser. Right-click the text you care about and choose Inspect. In the developer tools, select the element and open the Computed tab, then look for font-family. CSS font-family is a stack — a prioritised list like "Inter", system-ui, sans-serif — and the browser uses the first one available. The Computed value shows what was actually applied, which is the font you are seeing. This is reliable because it reflects the real rendered result, not just what the stylesheet requested.
Method 2: Use Firefox's Fonts panel (the best built-in tool)
Firefox has the strongest native typography tool. Open the inspector, select the <body> or any element, and choose the Fonts tab in the side panel. It lists every font actually used on the page, labels each as a system font or a downloaded web font, and even shows the specific files the page loaded. For variable fonts, it exposes the available axes (weight, slant, width) with live sliders. If you do this kind of work often, Firefox's panel alone answers most questions in one place.
Method 3: Hover with a browser extension
For speed, nothing beats a hover tool. Extensions such as WhatFont, Fontanello and Fonts Ninja let you point at any text and instantly read the font family, size, weight, line-height and colour. They turn a multi-step inspection into a single hover, which is ideal when you are scanning several elements or several sites quickly. Fonts Ninja additionally tries to identify the foundry and link to where a font can be licensed.
Method 4: Identify a font shown in an image
Sometimes the type you want is inside an image, a logo or a screenshot, so there is no CSS to read. For that, use an image matcher: upload the picture to a service like WhatTheFont or Font Squirrel's Matcherator, and it suggests the closest matching typefaces. Results improve when the sample is large, high-contrast and shows distinctive letterforms, so crop tightly to clean text before uploading.
Method 5: Read the @font-face rules and font files
To understand how a site delivers its fonts, look at the source of the fonts themselves. In the Network tab, reload and filter by Font to see the files the page downloaded — modern sites almost always serve woff2, the most compressed web-font format. The domain those files come from tells you the delivery method:
| Font files load from | Delivery method |
|---|---|
fonts.gstatic.com (CSS from fonts.googleapis.com) | Google Fonts |
use.typekit.net / p.typekit.net | Adobe Fonts (Typekit) |
| the site's own domain | Self-hosted web fonts |
*.fontawesome.com or icon-font files | Icon fonts (not body text) |
Reading the @font-face rules in the Styles panel shows the declared font-family names mapped to those files, which connects "what it's called" to "where it comes from". Self-hosting has become popular for performance and for privacy/GDPR reasons, so do not assume every site uses Google Fonts.
How to capture the colour palette
Colours are just as accessible. Two approaches cover almost everything:
- The DevTools colour picker. Inspect an element with a colour you want, click the little colour swatch next to a value in the Styles panel, and an eyedropper plus a picker appears showing the exact
hex,rgborhslvalue. You can sample any pixel on the page with the eyedropper. - CSS custom properties. Modern sites define their brand palette once as variables — for example
--color-primary,--bg,--accent— usually in the:rootselector. Find those in the Styles panel and you have the entire intended palette in one place, named the way the team thinks about it, rather than reverse-engineering one element at a time.
For a full design audit you will also care about how those colours combine: text-to-background contrast ratios (a WCAG accessibility concern) and the consistency of the palette across pages.
When it gets tricky
A few situations complicate things. System font stacks (like system-ui or -apple-system) mean the site deliberately uses the visitor's OS font, so what you see depends on your device. Icon fonts (Font Awesome and similar) appear in the font list but are not body typography. Variable fonts render many weights from a single file, so the "font" is one family with many instances. And text baked into images has no CSS at all — that is when Method 4 is your only option.
What the fonts tell you about performance
How a site loads its fonts is also a performance signal worth reading. Web fonts block text from appearing until they download, which can cause a flash of invisible text (FOIT) or a flash of unstyled text (FOUT) and hurt the Largest Contentful Paint metric. In the Network tab, check how many font files load, how large they are, and whether the site uses font-display: swap (visible in the @font-face rules) to show fallback text immediately. Sites that preload their primary font (a <link rel="preload" as="font"> in the head) and self-host a single subset woff2 file are usually faster than those pulling several weights from a third-party service. If you are auditing typography, performance is half the story — see Core Web Vitals explained for how fonts feed into the wider score.
Turning what you find into a style guide
If your goal is to document or recreate a design, capture four things in order: the typeface families (heading and body), the type scale (the font sizes and line-heights used for h1, h2, body and captions), the weights in play (regular, medium, bold), and the colour palette from the :root variables. Together these are the backbone of a brand style guide, and reading them straight from a live site is far more accurate than estimating from a screenshot. Note licensing as you go: a free Google Font can be reused freely, but a commercial typeface from a foundry or Adobe Fonts will need its own licence for your project.
How accurate is this?
For live text, font and colour detection is essentially exact — you are reading the same CSS the browser used to paint the page, so there is no guesswork. The only soft spots are images (where matching is a best-effort suggestion) and system font stacks (where the rendered font depends on the viewer's device). Cross-checking the Computed value against the downloaded font files removes any remaining ambiguity.
The fast workflow
- Hover with an extension (WhatFont/Fonts Ninja) for an instant read, or Inspect → Computed → font-family for the universal method.
- Open Firefox's Fonts panel when you want the complete list of fonts used.
- Filter the Network tab by Font to see the actual files and their source domain.
- Use the colour picker and
:rootvariables to capture the palette. - Check the licence before reusing any font you identify.
Go deeper
- The complete method: how to find out what a website is built with.
- Want the platform too? What website builder is this?
- Building a store? How to tell if a website is built with Shopify.
Want fonts, colours and the full stack in one report? Analyse any website with StackOptic — it extracts typography and the colour palette alongside the technology, performance and SEO picture, free.
Frequently asked questions
How do I find out what font a website is using?
Right-click the text you are interested in and choose Inspect. In the developer tools, open the Computed tab and look for the font-family property — the first name listed that the browser actually applied is the rendered font. In Firefox, the dedicated Fonts panel makes this even clearer by listing the exact fonts used on the page.
What is the easiest tool to identify a website's font?
A hover extension is the easiest option. WhatFont, Fontanello and Fonts Ninja let you point at any text and instantly see the font family, size, weight, line-height and colour, without digging through code. For identifying a font shown in an image rather than live text, use an image matcher such as WhatTheFont or Font Squirrel's Matcherator.
How can I tell if a site uses Google Fonts or self-hosted fonts?
Open the Network tab, reload, and filter by Font. If the font files load from fonts.gstatic.com (with a stylesheet from fonts.googleapis.com), the site uses Google Fonts. Files from use.typekit.net indicate Adobe Fonts. Font files served from the site's own domain mean the fonts are self-hosted, which is increasingly common for performance and privacy reasons.
How do I find the colours a website uses?
Inspect an element and use the colour swatch in the Styles panel, which opens an eyedropper and shows the exact hex or RGB value. Modern sites define their palette as CSS custom properties (variables like --color-primary) in the :root selector, so reading those gives you the whole brand palette at once rather than one colour at a time.
Can I reuse a font I found on another website?
Not automatically. Identifying a font does not grant a licence to use it. Many fonts are commercial and require a licence for web or commercial use, and web-font services like Google Fonts and Adobe Fonts have their own terms. Always check the font's licence before adding it to your own project.
Analyse any website with StackOptic
Get the full technology stack, performance, security and SEO report in seconds — free.
Analyse a websiteRelated articles
How to Tell If a Website Uses Crisp
Crisp is a developer-friendly, affordable live-chat and messaging tool. Detect it via the client.crisp.chat/l.js script, the window.$crisp object and the CRISP_WEBSITE_ID value.
How to Tell If a Website Uses Tidio
Tidio is an affordable live-chat and chatbot tool for SMBs and ecommerce. Detect it via the code.tidio.co/<publicKey>.js script, the window.tidioChatApi object and tidioChatCode.
How to Tell If a Website Uses Bugsnag
Bugsnag (SmartBear) is an error-monitoring and stability platform. Detect it via the @bugsnag/js SDK, the window.Bugsnag object, the API key in Bugsnag.start() and notify.bugsnag.com beacons.