Website Font Extractor
Website Font Extractor
Enter any website URL to discover all fonts used on that page
What we detect
Google Fonts
Fonts loaded via fonts.googleapis.com links or @import
Adobe / Typekit
Fonts served from use.typekit.net or fonts.adobe.com
Self-Hosted Fonts
@font-face declarations with custom font file URLs
System Fonts
Standard OS fonts referenced in font-family declarations
Privacy First: Your files are processed securely. Whenever possible, processing happens in your browser and files are never stored on our servers.
Identify every font used on any public website - Google Fonts, Adobe Fonts, self-hosted fonts, and system fonts - with actionable details to use them yourself. Enter any URL and the tool scans stylesheets and @font-face declarations, identifying Google Fonts API requests and Typekit embeds. Results are organized into four groups: Google Fonts (with weights, styles, and a ready-to-copy @import URL), Adobe Fonts, self-hosted fonts (with file formats: WOFF2, WOFF, TTF, OTF), and system font stack references. Each card renders the font name in that actual typeface and provides one-click copy for the CSS font-family and import URL. Filter by font type or search by name. No account required.
How to Use
- 1Type or paste any public website URL into the input field (e.g. https://example.com) and click Extract Fonts or press Enter
- 2Or click one of the quick demo site buttons (Tailwind CSS, CSS-Tricks, web.dev, Smashing Mag) to instantly analyze a popular site
- 3Wait a few seconds while the tool fetches the page HTML and all linked CSS stylesheets from the server side
- 4Review the stats bar: Total Fonts, Web Fonts, and System Fonts found on the page
- 5Use the filter tabs to narrow results: All Fonts, Google Fonts, Adobe Fonts, Self-Hosted, or System
- 6For each font card, read the type badge to know where the font comes from (Google Fonts, Adobe, Self-Hosted, System)
- 7Read the Weights section to see which font weights (100–900) the page has loaded
- 8Read the Formats section to see the file formats available (WOFF2, WOFF, TTF, OTF, etc.)
- 9Click the Copy icon next to 'font-family' to copy the CSS font-family property for that font
- 10For Google Fonts, click the @import copy button to copy the full import snippet - paste this at the top of your CSS to use the same font
- 11Click the external link icon on any Google Font card to open its page on Google Fonts directly
- 12Customize the preview text and size using the Preview Text input and size slider to see how each font renders your own content
Features
- Detects Google Fonts from fonts.googleapis.com link tags and @import in CSS
- Detects Adobe Fonts / Typekit from use.typekit.net and @font-face declarations
- Detects self-hosted web fonts from @font-face declarations in all linked CSS files
- Detects system fonts referenced in font-family property values across all stylesheets
- Fetches and parses up to 12 linked CSS files plus all inline <style> blocks
- Extracts font weights (100–900) and styles (normal, italic) per font
- Shows font file formats: WOFF2, WOFF, TTF, OTF, EOT
- Live Google Fonts preview - fonts are loaded in your browser so you see them exactly
- Adjustable preview text and font size slider (12px–52px)
- Filter by font type: Google Fonts, Adobe Fonts, Self-Hosted, System
- One-click copy of font-family CSS property
- One-click copy of full @import URL for Google Fonts
- Direct link to each font's page on Google Fonts
- 4 quick demo site presets for instant results
- Server-side fetching - no CORS issues, works on any public website
- No data stored - URL and page content never persisted
Frequently Asked Questions
Community Feedback
Like
Total Rating
No ratings yetReviews
No reviews yet. Be the first!
Rate & Review
Was this tool helpful?
Rate this tool:
Write a Review