infora · Stylepick

How to Find Out What Font a Website Uses

Opening DevTools and scrolling through hundreds of computed properties works, but it is slow when all you wanted was the name of a typeface.

Steps

1. Click the Stylepick icon in the toolbar.
2. Move the pointer over the text you are curious about. A small panel follows the pointer and shows the font family, size and weight, and line height of whatever is underneath — along with its text and background color, margin, padding, border, corner radius and shadow.
3. Click to lock onto that element. Pick another moves to a different one.
4. Press Esc or click the icon again to turn it off. The page is left exactly as it was.

What the values mean

The panel reports what the browser actually applied, not the text of the original stylesheet. So a line height may read 27.2px rather than the 1.7 someone wrote, and a font family appears as the resolved stack. When a font file comes from a stylesheet hosted on another site, the panel says so instead of guessing.

If you need the whole page at once

Pro exports every color and font on the page as CSS variables or JSON, and can list the page's images, background images and font files. It is $2.99 / month or $24 once, and the free inspection above has no limit and needs no account.

Get the extension

Get Stylepick for Chrome