Font of Web - Save Website Inspiration, Detect Fonts, Extract Design Tokens

Extract fonts, colors, and design tokens from any website. Export to Tailwind, CSS or Figma Tokens instantly.

Click the extension on any page. It scans the DOM to find the actual fonts rendered, resolves font weights, and pulls every color used. You get a clean breakdown of the site's design system without hunting through stylesheets.

Font Identification: See the exact families, weights, and sizes in use. The extension parses the actual font files for additional information - actual font names (not css declared names), foundry, designer information.

Color Extraction: Get every color on the page, organized by usage (text, background, border).

Code Export: Copy the design tokens as CSS variables or a Tailwind v4 config. Paste it straight into your project.

Save for Later: Pin the site to your collection to build a visual library of references.

It’s faster than inspecting elements and more useful than a screenshot. Good for building design systems, cloning styles for practice, or just satisfying your curiosity about what font a site is using.