getting started

Every font in the catalog is served from cdn.onlyfonts.ai. No account, no API key, no tracking.

load a font

Add one link tag to your page head:

<link href="https://cdn.onlyfonts.ai/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Then use it in CSS:

body {
  font-family: 'Inter', sans-serif;
}

That’s it. The CSS response includes @font-face rules with unicode-range subsets, so browsers only download the character sets your page actually uses.

multiple fonts

Repeat the family parameter:

<link href="https://cdn.onlyfonts.ai/css2?family=Inter:wght@400;600&family=Space+Mono:wght@400" rel="stylesheet">

variable fonts

Request a weight range with ..:

<link href="https://cdn.onlyfonts.ai/css2?family=Fixel:wght@300..800" rel="stylesheet">

Check any font’s detail page to see whether it’s variable and which axes it supports.

performance tips

• add <link rel="preconnect" href="https://cdn.onlyfonts.ai" crossorigin> before the stylesheet link
• request only the weights you use — each weight is a separate file
• display=swap (the default) shows fallback text immediately while the font loads

finding fonts

• browse the catalog — 2,600+ open-source fonts with filters for category, language, and variable axes
• search — describe what you want (“warm serif for a bakery”) or upload a screenshot to identify a font
• every font page has the copy-paste CDN snippet, supported languages, character map, and pairing suggestions

next steps

• migrating from Google Fonts — usually a one-line change
• CDN reference — all endpoints and caching behavior
• subsetting — how character-set splitting works