Fonts on your site are split into two roles: headings and body. Each can be set independently, so you can mix and match — or use the same font throughout.
Heading font — applies to H1, H2, section titles, and featured text. This is what visitors see first and it sets the visual tone of your brand.
Body font — applies to paragraphs, product descriptions, button labels, navigation menus, and most general text across the site.
Each font role has two fields: a name and an optional URL. What you fill in depends on where your font is coming from — see the options in Step 2.
Supported font types:
Google Fonts — the most common. Just type the font name; no URL needed.
Google Fonts with a direct link — use this when you need specific weights (e.g. Bold 700 only).
Adobe Fonts (Typekit) — for brands using Adobe's font library via a kit URL.
Self-hosted fonts — your font lives on a CDN; you provide the file URL directly.
System fonts — browser-native fonts like sans-serif or monospace. Nothing is downloaded.
Poppins (default) — if all fields are left empty, the site uses Poppins for everything.
Step 1: Open Your Theme
In the main view of your CMS repository, find the Theme document (there's only one per site)
Click the Typography tab — not Main or Variables. Fonts live in Typography only.
Step 2: Fill In the Font Fields
You'll see four fields:
Heading font name — font used for headings and titles
Heading font URL — optional link to your heading font
Body font name — font used for body text, buttons, and menus
Body font URL — optional link to your body font
Google Fonts (most common) — Type the exact font name (e.g. Inter, Roboto, DM Sans). Leave the URL field empty. The name must match exactly what's on fonts.google.com — if misspelled, your site falls back to Poppins.
Google Fonts with a specific link — Enter the font name, then paste the Google Fonts URL (starts with https://fonts.googleapis.com/...) into the URL field. Use this when you need specific font weights.
Adobe Fonts (Typekit) — Enter the font name as shown in Adobe (e.g. futura-pt) and paste your kit URL (e.g. https://use.typekit.net/xxxxx.css).
Self-hosted font — Enter whatever you want to call the font, and paste the direct file URL (must end in .woff2, .woff, .ttf, or .otf).
System font — Type system-ui, sans-serif, serif, or monospace. Leave the URL empty. Nothing is downloaded.
Reset to default — Leave all fields empty and the site uses Poppins throughout.
Step 3: Publish
Click the green Publish button (top right). Saving as a draft will NOT update your live site.
Open your site in an incognito window or press Ctrl+Shift+R to bypass cache.
If fonts don't update immediately, wait 2–5 minutes and refresh again.
Troubleshooting
Whole site still shows Poppins → Font name is misspelled, URL is invalid, or fields are empty. Fix and publish again.
Only headings look wrong → Check the Heading font name and Heading font URL fields.
Nothing changed at all → Did you click Publish (not just Save)? Force-refreshed? Right Prismic repo?
Google font not loading → Verify the name at fonts.google.com, or paste the full Google Fonts URL instead.
URL not working → Must start with https:// — the site ignores http:// and falls back to Poppins.
Things to avoid
Pasting the full Google Fonts embed code — only paste the URL starting with https://
Using http:// instead of https://
Editing fonts in the Main or Variables tab — it's Typography only
Asking your developer to deploy for a font change — not needed ✓