Free Web Font Detector

The Web Font Detector is a free online tool that extract all fonts used in html or css. identify google fonts, system fonts, and web fonts. It runs entirely in your browser with no installation or sign-up needed.

Paste your CSS or HTML source, and the tool extracts all font-family declarations and @font-face rules.

Yes — it recognizes Google Fonts CDN URLs and maps them to font names.

Yes, completely free.

Absolutely. The Web Font Detector processes everything client-side in your browser. No data is uploaded to or stored on any server. Your content remains private on your device at all times.

Yes, the Web Font Detector is fully responsive and works on smartphones and tablets. You can use it on any device with a modern web browser -- no app download required.

No account or registration is needed. Simply open the Web Font Detector in your browser and start using it immediately. There are no sign-up walls or usage restrictions.

The Web Font Detector works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. For the best experience, use the latest version of your preferred browser.

A system font already ships with the visitor's operating system — Arial, Helvetica, Georgia, Segoe UI, and the generic keywords serif, sans-serif, and monospace — so it loads instantly with nothing to download. A web font is a file the site itself serves, declared in an @font-face rule and hosted alongside the page; the browser must fetch that file before the text renders. A Google Font is a web font delivered from Google's CDN at fonts.googleapis.com, open source and free to use under its license. The detector tags every typeface it finds as Google, System, Custom, or Unknown so you can tell at a glance which ones cost a download and which come free from the device. Paste your CSS or HTML and the summary panel counts each bucket for you.

Open the page and grab its source — use your browser's View Source or DevTools to copy the markup, or copy the stylesheet straight from a code editor — then paste it into the detector. The parser scans every font-family declaration, the font shorthand like "font: bold 16px/1.5 Georgia, serif", @font-face blocks, and Google Fonts @import and <link> URLs, then resolves the names into one deduplicated list. Each entry shows the selector or context it appeared in, so you can see whether a typeface is used on the body, an h1, or an inline style. Reading exact family names beats guessing a typeface by eye, but remember web fonts are licensed assets — check the license before reusing one. Paste a site's source above to see its full font list in seconds.

A font is tagged Unknown when its name isn't on the built-in list of roughly fifty common system fonts and it wasn't tied to either a Google Fonts CDN URL or an @font-face rule in the source you pasted. In practice that usually means a licensed web font loaded some other way, a self-hosted face whose @font-face block wasn't included in the snippet, or simply a typo in the family name. It is not an error — the tool is telling you it found a real named typeface but couldn't confirm where it comes from. If a font you expected to be Custom shows as Unknown, paste more of the stylesheet so the matching @font-face block is included. Paste your full CSS to get every font classified as accurately as possible.

A font stack is the full font-family value — a primary typeface followed by fallbacks the browser tries in order, like "Inter, -apple-system, Arial, sans-serif". A non-system font stack is that list with the generic system fallbacks stripped out, leaving only the typefaces a page actually loads as web fonts. The detector builds this stack for you and offers it as a one-click copy, which is handy when you want to reuse a layout's real typefaces without dragging along its fallback chain, or when auditing exactly which fonts a page depends on. Trimming a stack to the fonts you genuinely need is also a performance win, since every web font is a file the browser must download. Paste your source and copy the ready-made non-system stack from the results.

It detects both, plus more. The parser handles four kinds of font reference and merges them into one list: @font-face blocks for self-hosted or custom fonts, captured with their declared family name and the src URL so you can see where the file loads from; Google Fonts @import url(...) rules and <link> tags pointing at fonts.googleapis.com, with names pulled from the URL's family parameter; standard font-family declarations in any CSS rule or inline style; and the font shorthand where size and family are written together. Google Fonts get a direct link to their specimen page, and @font-face fonts are listed with their source URL. Because everything runs locally in your browser, it works on source you paste rather than a live URL. Paste a stylesheet to see every font, however it's loaded.