font inspectorFont and typography guides.
Practical guides, thoughtful details, and a little inspiration.
For everyone who’s ever asked, “what font is that?”
What font is that? How to identify the font on any website
Four reliable ways to find out what font a website uses, from a one-click extension to browser DevTools, plus what to do when the text is an image.
How to see every font a web page uses
List every font on a web page with the Network panel, Firefox’s Fonts tab, a short console snippet or one click, and learn how to read the result.
You found the font. Here is how to get it (legally)
Found a font on another website? Work out which of five cases you are in and the legal way to get it: Google Fonts, Adobe Fonts, a license or a free match.
How to find a font with Chrome DevTools (and the faster way)
Find the exact font on any page with Chrome DevTools: the Computed tab, Rendered Fonts, the Network panel and @font-face rules. Plus a one-click shortcut.
How to find the font size, weight and line height of any text
Read the exact font size, weight, line height and letter spacing of any text on a website, and convert the pixel values into rem, em and a ratio.
How to tell if a site uses Google Fonts, Adobe Fonts or its own files
Check whether a website loads its fonts from Google Fonts, Adobe Fonts, its own server or the device, using view-source, the Network panel or one click.
How to identify a font from an image or screenshot
Find the font in a picture: check whether the text is really an image, prepare a clean crop, run an image identifier, and compare candidates letter by letter.
Copy any website’s typography as CSS, Tailwind or SCSS
Read a text style from any website with DevTools, clean it up, and rewrite it as portable CSS, Tailwind classes or SCSS variables. Or copy it in one click.
Why your font looks different: CSS font stacks and fallbacks explained
Learn how browsers choose a font from your CSS stack, why web fonts fail to load, how to debug it in DevTools, and how to build a fallback that barely shifts.
How to find what font a website uses in Firefox, Safari and Edge
Step-by-step ways to identify a website’s font in Firefox, Safari and Edge with the built-in developer tools, plus which browsers can run Font Inspector.
How to check text contrast on a live website
Check whether text on a live page meets WCAG contrast: the ratios to aim for, where Chrome and Firefox DevTools show them, and the cases the numbers miss.
How to find fonts inside iframes and embedded content
Checkout forms, video players and booking widgets live in their own documents. Learn how to inspect their fonts with DevTools or with a single click.
Build a font swipe file as you browse
How to keep a useful record of the typography you notice online: what to save for each find, how to organize and compare it, and how to back it up.
From a live website to typography design tokens
Audit the fonts, sizes and weights a live site really uses, consolidate them into a scale, and write them down as CSS variables and design tokens.
How to find what font a Shopify store uses (and add it to yours)
Identify the font on any Shopify store, tell a Shopify library font from a custom one, then set it in your own theme or add a licensed font file.
How to find what font a WordPress site uses
Identify the font on any WordPress site, work out whether the theme, a plugin or Google Fonts supplies it, then set the same font on your own site.
How to find the fonts on a Squarespace, Wix, Webflow or Framer site
Spot which site builder a page runs on, identify its fonts, and learn where each builder lets you pick the same font or upload a licensed one.
How to match a website’s font and text styles in Figma
Capture the font, weight, size, line height, letter spacing and color from a live site, convert the CSS units, and rebuild them as Figma text styles.
How to match a website’s font in Canva
Identify the font on any website, find it in Canva’s font list, upload a licensed copy to your Brand Kit, or choose a free look-alike that holds up.
From a font you spotted to your Tailwind and Next.js project
Identify a font on a live site, license it, load it with next/font, expose it as a CSS variable and wire it into Tailwind v4 or v3 with matching sizes.
Can I use a font I found on another website? Font licensing in plain English
What desktop, web and app font licenses allow, how open source and “free for personal use” fonts differ, and a checklist for a font you found online.
Are Google Fonts really free for commercial use?
Yes. See what the Google Fonts licenses allow for logos, print, apps and client work, the few things they forbid, and how to check any family’s license.
Google Fonts and GDPR: when and how to self-host
Why embedding Google Fonts sends visitor IP addresses to Google, what the 2022 Munich ruling said, and how to self-host the fonts and verify the result.
How to pair fonts (without overthinking it)
A practical method for pairing fonts: give each typeface a job, pick one clear contrast, test on real content, and study pairings on sites you admire.
Line height and letter spacing: the invisible difference
How to set line height and letter spacing in CSS: unitless values, ranges for body and headings, line length, WCAG text spacing and how to inspect it.
Variable fonts, explained one axis at a time
What variable fonts are, the five registered axes and their CSS properties, a correct @font-face setup, font-variation-settings pitfalls, and how to spot one.
Build a typography scale that feels like a system
Build a type scale: pick a base size and a ratio, compute the steps in rem, make headings fluid with clamp(), and ship it as CSS or Tailwind tokens.
rem vs em vs px: which unit for font sizes?
What px, em and rem really mean in CSS, why em compounds, how each unit treats the reader’s font size setting, and a table for choosing the right one.
font-display explained: swap, fallback, optional and block
What each font-display value does while a web font loads, how it affects invisible text, layout shift and LCP, and how to choose the right one per font.
Font weight numbers and names: 100 to 900 explained
What each font-weight number from 100 to 900 is called, how normal, bold, bolder and lighter resolve, and what the browser does when a weight is missing.
The system font stack: fast, native typography with zero downloads
What system-ui resolves to on each platform, the classic long stack, ui-serif and ui-monospace support, the known caveats, and when system fonts are right.
How to prevent layout shift from web fonts
Why a font swap moves layout, how to measure it, and how to stop it with size-adjust, metric overrides, font-display: optional, preloading and smaller files.