# Check heading and body fonts from a URL [Open the live Fudge conversation](https://design.withfudge.com/share/check-heading-and-body-fonts-from-a-url) Last updated: 2026-08-25 The quickest way to check heading and body fonts from a URL is to separate the page's display text from its long-form text, then verify the family, weight, size, and line height used for each role. Start with the largest headings and the most common paragraph style, because those two choices usually explain most of the page's typography. Use this simple method for any page you are reviewing: 1. Open the page at the URL you want to check. 2. Record the font family used by the main heading, supporting headings, body copy, navigation, and buttons. 3. Note the weight and size for each role, not just the family name. 4. Check whether the heading and body use the same family or a deliberate pairing. 5. Compare repeated elements across the page before deciding that a one-off label represents the site's main type system. A useful result is a short table with columns for role, family, variant, weight, size, line height, and where it appears. That format makes it easier to reproduce the page and prevents a common mistake: identifying a family correctly but overlooking that headings use a different cut, variable setting, or weight. ## Separate heading fonts from body fonts For headings, inspect the page title, section titles, card titles, and prominent hero statements. Look for repeated letter shapes and spacing across several headings. A display face may appear only in large text, while a sans serif handles navigation and interface labels. Do not assume the biggest text is the only heading style. A page can use one family for the hero and another for smaller section headings. For body text, check paragraphs, lists, form labels, descriptions, and helper text. Body type is usually easier to identify when you compare several lines at normal reading size. Record the regular weight first, then check whether bold, medium, or italic variants appear. If the body family is a variable font, note that explicitly because a static font name alone may not describe the actual file or range in use. Also check fallback behavior. A page may declare several families in order, so the visible result can differ when a font file fails to load or when a particular character is missing. Compare letters, numerals, punctuation, and the same word in different parts of the page. This helps distinguish a real secondary font from a fallback that appears only in a limited case. ## Captured pages [![Linear typography](https://pin.fontofweb.com/4902?format=jpg)](https://design.withfudge.com/share/pin-4902) [Linear typography](https://design.withfudge.com/share/pin-4902) ## Fonts captured on linear.app - **Inter Variable** — weight 400 · Primary sans serif in the captured Linear typography system. - **Berkeley Mono** — Supporting monospace typeface in the captured system. - **Tiempos Headline** — An occasional editorial display face in the captured system. ## Verify the match before copying it A font-family label is only one part of the answer. Compare the apparent width of a sentence, the height of lowercase letters, the shape of the lowercase “a” and “g,” the numerals, and the spacing around capitals. Then check the font weight and line height. Two pages can use the same family but feel very different because one uses tighter tracking, a heavier weight, or a shorter line height. If you are rebuilding the design, capture at least these values for each role: - Family name and whether it is variable - Weight and style, such as regular, medium, semibold, or italic - Font size and line height - Letter spacing or tracking - Text transform, such as uppercase labels - Typical width of the text block When the exact font is unavailable, choose an alternative by comparing structure rather than name. Match x-height, character width, stroke contrast, terminals, and the overall density at the intended size. For a heading alternative, prioritize silhouette and width. For a body alternative, prioritize readability, x-height, and similar line length. Test the replacement with real page copy, because a substitute that looks close in a specimen can wrap differently in the layout. Open the examples below and compare the captured typography roles before borrowing a pattern. The Linear example lists Inter Variable, Berkeley Mono, and Tiempos Headline, with Inter Variable identified as the primary sans serif. That is a useful reminder to distinguish the main interface family from supporting monospace or editorial faces rather than flattening every observed font into one answer. ## Turn the check into a usable type system After identifying the fonts, write a small type system instead of keeping loose notes. For example, define display, heading, body, label, code, and button roles. Each role should include a family, weight, size range, line height, and tracking value. Add one sentence describing where the role appears so another person can apply it consistently. Then test the system on a representative screen: a page title, two section headings, a paragraph, a list, a button, and a small label. Check wrapping at the target viewport and at a narrower width. If the heading wraps too early, adjust the substitute family or tracking before changing the size. If body text feels dense, try line height and weight before replacing the family. Keep observed details separate from assumptions. You can document that a captured page uses a specific family in a visible role, but that does not prove you own the site's internal design system, font license, source files, or private tokens. For implementation, verify the font's source and usage rights independently, then load the appropriate files and test performance and fallback behavior in your own project. A practical final checklist is: heading family confirmed across multiple headings, body family confirmed across multiple paragraphs, weights and variants recorded, line height measured or estimated, fallback checked, replacement tested with real copy, and licensing verified before use. ## Use this in your AI agent > Check the heading and body fonts on this URL. Separate display text, section headings, body copy, labels, buttons, and code or monospace text. Return a table with each role's family, variant, weight, size, line height, tracking, and evidence from repeated page elements. Flag fallback fonts and suggest close alternatives only when the original family cannot be verified. Then propose a compact type system I can test on a representative screen. [Install Fudge for your AI agent](/mcp) to inspect captured pages and compare typography roles while you work. --- Compare several repeated roles instead of judging the hero headline alone. Check the main title, section headings, card titles, navigation, paragraphs, lists, labels, and buttons. If the letter shapes, widths, and spacing stay consistent across those roles, the page may use one family with different weights or sizes. If headings have noticeably different proportions, terminals, contrast, or rhythm from paragraphs, treat them as separate candidates. Look especially at lowercase “a” and “g,” numerals, punctuation, x-height, and the width of the same short word at similar sizes. A display face often has a stronger silhouette or more editorial details, while body text tends to keep an even texture across long lines. Also check the declared fallback order when you can access the page's font settings. A visible difference in one character set may come from a fallback rather than an intentional second font. Confirm the pattern in at least three places before naming the roles. Record the family, weight, size, and line height for each. The result might be one variable family for most text, plus a monospace face for code or a display face for occasional editorial headings. Description: A repeatable way to distinguish intentional type pairings from weight changes and browser fallbacks. Prompt: Compare the repeated heading, body, navigation, label, and button styles on this URL. Identify whether the page uses one family or separate families, and explain the evidence. [Run this in your AI agent](/mcp) --- Include enough detail for someone else to reproduce the page without guessing. Start with a role table covering display, heading, body, navigation, button, label, code, and caption text where those roles exist. For every role, record the family, source or file name if verified, variant, weight, style, size, line height, tracking, casing, and a short example of where it appears. Add a second section for behavior. Note which roles change at smaller widths, where text wraps, whether headings use a maximum width, and whether the page relies on a variable font axis. Include fallback families and a quick comparison showing how the chosen substitute affects line length. Use actual page copy for this test rather than placeholder text. Finish with a verification checklist: repeated elements checked, font files confirmed, missing glyphs tested, browser fallback reviewed, and usage rights checked independently. Keep observations separate from assumptions. A captured family name can describe what is visible, but it does not by itself establish ownership of the site's internal design system or permission to reuse the files. Store the report with a small specimen screen so visual differences remain easy to review. Description: A practical report structure that preserves visual evidence, implementation details, and responsible usage checks. Prompt: Build a font report for this URL with role, family, variant, weight, size, line height, tracking, casing, fallback, repeated evidence, responsive behavior, and independent usage-rights checks. [Run this in your AI agent](/mcp) ## Related questions - [Check where each font is used on a webpage](/share/check-where-each-font-is-used-on-a-webpage) - [Website Typography Analyzer With Font Sizes](/share/website-typography-analyzer-with-font-sizes) - [Compare Fonts That Look Alike in a Browser](/share/compare-fonts-that-look-alike-in-browser) - [Website Font Detector for Claude Code](/share/website-font-detector-for-claude-code)