Skip to main content

Fonts

Fonts tells you how any text on the page is set. A stylesheet lists several families and the browser draws with the first one it has, so reading the CSS does not tell you which typeface is on screen. Fonts does: hover the text and a card names the family actually drawn, with its weight, size, colour and contrast.

Using it​

  1. Turn it on in Settings > Toolbox: it is off by default.
  2. Open the toolbox and click the Fonts button.
  3. Move the pointer over any text. An outline shows which text is being read, and a card beside the pointer says how it is set.
  4. Click to copy that text's CSS. The last line of the card changes from Click to copy CSS to Copied CSS.

Press Esc, or click the button again, to put the tool away.

What the card shows​

  • The family the browser drew with, as the stylesheet spells it. When that is not the first family the stylesheet asked for, a line under it says which one it fell back from, such as fallback for Inter: that font is not installed or did not load.
  • The weight, as a number and a name (700 (bold)), followed by italic when the text is.
  • The size and line height, in pixels, with their ratio: 16px / 24px (1.5).
  • The colour, as a hex code with a swatch.
  • letter-spacing, variants (font-variant), features (OpenType features set with font-feature-settings) and variables (the axes of a variable font, set with font-variation-settings). Each reads normal when the page sets nothing.
  • contrast ratio: the WCAG contrast between the text and the colour behind it, graded AAA, AA, AA Large or Fail. Large text (24px, or about 18.7px in bold) is graded by the more lenient rule for large text.

Example: copy a heading's CSS​

Hover a heading and click it. The clipboard now holds its declarations, ready to paste into a stylesheet:

font-family: Inter, system-ui, sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 40px;
color: #1a1a1a;

Only what the text sets is copied: font-style, letter-spacing, font-variant, font-feature-settings and font-variation-settings are left out when they are normal.

Good to know​

  • While Fonts is out, the page never sees your pointer: hovering and clicking a link reads it without following it, and nothing on the page opens or reacts.
  • There is no contrast number over an image or a gradient. The card says unknown (not a flat background) rather than guess, since the contrast changes from one pixel to the next. The magnifier reads the colour of the exact pixels instead.
  • The colour behind the text is worked out from the page's styles, including see-through layers, down to a white page.
  • Fonts changes nothing on the page. Put it away and the page responds to the pointer as before.
Give feedback about the toolbox

Found text Fonts read wrong? Tell us which page.

Give feedback

Was this page helpful?

Need something else? Request a feature