Website Font {API}
Instantly retrieve a company's fonts from their website with our styleguide API.
The Brand.dev Styleguide API retrieves fonts used on any company website using just its domain name. No guesswork, scraping, or manual inspection required.
Whether you're building branded dashboards, white-labeled templates, or custom client UIs, this API helps you get brand fonts from any domain in seconds.
Font Extraction Explained
Our Font API crawls a company's website to detect and return the fonts they use across stylesheets, inline styles, and embedded components.
What you receive:
Primary and fallback font families
Complete font stack information
Font weights and styles
Bold, Regular, Light, etc.
Font sources
Google Fonts, Adobe, self-hosted
Use context
Headline, body, UI, etc.
Structured JSON response
Clean, parseable font data
Similar font alternatives
For protected custom fonts
It's the fastest way to extract brand fonts from a website, perfect for brand alignment at scale.
How It Works
Here's how the fetch font API works behind the scenes:
Input a domain like airbnb.com
Our engine scans CSS files and inline <style> blocks, web font imports (@import, <link>, @font-face), and common font usage in text-heavy elements
Fonts are categorized by role (e.g. primary, secondary, fallback) and returned in a structured response
Some companies use custom fonts which may be protected by their terms of service, we return the most similar publicly available font in our response!
Scans multiple sources:
- • CSS files and inline <style> blocks
- • Web font imports (@import, <link>)
- • @font-face declarations
- • Common font usage in text elements
- • Font family declarations
- • Typography hierarchy analysis
Unlike other tools, this is a production-ready font identification API, not a browser plugin or font previewer.
The Only Font Extraction API You'll Ever Need.
Use Cases
Onboarding Magic
Personalize onboarding automatically from a customer's email domain. Pre-fill critical fields and watch your conversion rates increase.
Demo Preparation
Prepare demo accounts and experiences with ease. No more hunting down logos, colors, descriptions, and other data.
Design Automation and Builders
Pre-fill font selectors and avoid costly and time-consuming task of collecting branding information for each of your clients.
Email Personalization
Effortlessly personalize sales emails by automagically including the right logos, colors, and descriptions from your customer's email domain.
Enrich Line Items
Elevate line item data with company logos and colors, transforming them into visually compelling and informative elements.
Asset Generation
Automatically generate high-quality branded assets using the right logos, colors, and images to streamline your automated processes and ensure consistency.
See it in action
Get structured font data with a single API call
Sample API Response
{
"status": "ok",
"domain": "brand.dev",
"styleguide": {
"typography": {
"p": {
"fontFamily": "Inter, sans-serif",
"letterSpacing": "0.1px",
"fontSize": "14px",
"lineHeight": 1.5,
"fontWeight": 400
},
"headings": {
"h1": {
"fontFamily": "Courier New, monospace",
"letterSpacing": "0.5px",
"fontSize": "36px",
"lineHeight": 1.3,
"fontWeight": 700
},
"h2": {
"fontFamily": "Inter, sans-serif",
"letterSpacing": "0.3px",
"fontSize": "24px",
"lineHeight": 1.4,
"fontWeight": 700
},
"h3": {
"fontFamily": "Inter, sans-serif",
"letterSpacing": "0.2px",
"fontSize": "18px",
"lineHeight": 1.4,
"fontWeight": 700
},
"h4": {
"fontFamily": "Inter, sans-serif",
"letterSpacing": "0.1px",
"fontSize": "16px",
"lineHeight": 1.4,
"fontWeight": 700
}
}
},
"components": {
"button": {
"secondary": {
"boxShadow": "none",
"padding": "10px 24px",
"backgroundColor": "transparent",
"borderColor": "rgba(182, 126, 255, 1)",
"borderRadius": "20px",
"color": "rgba(182, 126, 255, 1)",
"borderWidth": "1px",
"fontSize": "14px",
"textDecoration": "none",
"borderStyle": "solid",
"fontWeight": 600
},
"link": {
"boxShadow": "none",
"padding": "0px",
"backgroundColor": "transparent",
"borderColor": "transparent",
"borderRadius": "0px",
"color": "rgba(182, 126, 255, 1)",
"borderWidth": "0px",
"fontSize": "14px",
"textDecoration": "underline",
"borderStyle": "none",
"fontWeight": 400
},
"primary": {
"boxShadow": "none",
"padding": "10px 24px",
"backgroundColor": "rgba(182, 126, 255, 1)",
"borderColor": "rgba(182, 126, 255, 1)",
"borderRadius": "20px",
"color": "rgba(20, 0, 51, 1)",
"borderWidth": "0px",
"fontSize": "14px",
"textDecoration": "none",
"borderStyle": "none",
"fontWeight": 600
}
},
"card": {
"boxShadow": "0 4px 12px rgba(99, 66, 179, 0.4)",
"padding": "24px",
"backgroundColor": "rgba(26, 24, 48, 1)",
"borderColor": "rgba(99, 66, 179, 0.6)",
"borderRadius": "16px",
"borderWidth": "1px",
"borderStyle": "solid",
"textColor": "rgba(230, 230, 255, 1)"
}
},
"elementSpacing": {
"xl": "40px",
"md": "16px",
"sm": "8px",
"lg": "24px",
"xs": "4px"
},
"shadows": {
"xl": "0 12px 24px rgba(255, 255, 255, 0.2)",
"md": "0 4px 8px rgba(255, 255, 255, 0.1)",
"sm": "0 1px 3px rgba(255, 255, 255, 0.05)",
"lg": "0 8px 16px rgba(255, 255, 255, 0.15)",
"inner": "inset 0 1px 3px rgba(255, 255, 255, 0.1)"
},
"colors": {
"background": "#0B0A23",
"text": "#FFFFFF",
"accent": "#B87FFF"
}
},
"code": 200
}Typography Preview
H1: Courier New, 36px
Weight: 700, Spacing: 0.5px
H2: Inter, 24px
Weight: 700, Spacing: 0.3px
Body: Inter, 14px
Weight: 400, Line-height: 1.5
No more manual inspection → just smart, accurate font extraction trusted by hundreds.