CSS · Tailwind classes · @font-face · Google Fonts link

Identify the fonts onany website

Hover any text to see its font family, size, weight, line height, letter spacing and colour. Or open the Design System panel to see the page's entire type scale — every distinct text style, labelled Heading 1, Body, Caption and so on, rendered in its own font.

Install Extension Read the docs

Free with an account · Chrome, Edge & Brave

Open typography

Open the Design System panel. Xtractly scans every piece of visible text on the page.

Read the type scale

Each distinct style is shown as a live specimen with its size, weight and line height, largest first.

Copy the CSS

Copy a style as CSS or Tailwind — including the @import or @font-face needed to load the font.

Built for the code you actually ship

Full type scale
See every heading, body and caption style the page uses, not just the one line under your cursor.
Font source
Xtractly shows where each family is loaded from — a Google Fonts link or a self-hosted @font-face.
Loaded but unused
Fonts the page loads but never paints are flagged separately, so you know what's actually in use.
CSS and Tailwind export
Every style copies as plain CSS or Tailwind classes, ready for your own stylesheet.