Skip to content

How to inspect fonts and CSS on any webpage

Updated October 10, 2026

Seeing a typeface or spacing you like and wanting to know how it is built is one of the most common reasons to look at a page's CSS. This guide shows two ways to do it and explains what the numbers you see actually mean.

Computed values versus source CSS

A browser calculates a final value for every property of every element: the computed style. That is what you see on screen. It is not the same as the CSS the author wrote. The author may have written 1.5rem, a percentage or a CSS variable, and the computed value is the resulting number of pixels. Authored CSS can also be spread over many files and overridden several times.

The inspector in this guide shows computed values. They are the right answer to the question what does this element look like, and they will not always match the source you would see in a stylesheet.

Option 1: browser DevTools

  1. Right-click the element and choose Inspect.
  2. In the Elements panel, open the Styles pane to see the rules that apply, or the Computed pane for final values.
  3. DevTools in Chrome and Edge can also show which font was actually rendered for an element (look for Rendered Fonts in the Elements panel), which is the quickest way to learn which font in a font stack was used.

Option 2: AnyTool Font & CSS Inspector

The extension is a lighter alternative when you just want the values, and want to copy them.

  1. Click the extension icon and choose Start Inspecting.
  2. Move the pointer over the page. The hovered element is outlined and labelled with its tag and size.
  3. Click an element to select it. The panel shows typography, colors, box model, selector and CSS variables.
  4. Click any row to copy that declaration, or use Copy CSS for a ready-to-paste block.
  5. Use the arrow keys to move to the parent, first child or neighbouring siblings. Press Escape to exit.

Reading the results

  • Font family is the whole font stack as the browser resolved it, not necessarily the font that was drawn. A stack lists fallbacks in order.
  • Colors are shown as hex values with the original rgb value alongside. Transparent backgrounds are not shown with a swatch.
  • Padding and margin collapse to CSS shorthand where the sides match.
  • CSS variables lists custom properties that apply to the element, including ones inherited from the root, and which properties use them. Stylesheets from other websites cannot be read by the browser, so variables defined there may not appear.

Respecting other people's work

Knowing how a page is styled is fine. Fonts and design assets are often licensed, so check the license before reusing a typeface or copying a design.