Swapping the headline font is one of the quickest ways to give your template a completely different personality. Here's how to do it cleanly using text styles.

Method 1 — Via the Text Style (Recommended)

1. Open Assets → Text Styles.

2. Double-click the "Heading 1" style (or "Display" for hero text).

3. A font panel opens. Click the font name field.

4. Type a new font name and select it from the dropdown (e.g., "Playfair Display", "Sora", "Cabinet Grotesk").

5. All headings using this style update instantly across your entire site.

Method 2 — Directly on a Text Element

For one-off changes (not recommended for bulk changes), you can also select a text element on the canvas and change its font in the right panel under Text → Font. This overrides the text style for that element only.

⚠️ Note: If you change a font on a specific element rather than via the global text style, it disconnects from the style. Future changes to the global style won't apply to that element.

Finding Good Font Pairings

Great typography often pairs a distinctive display font (for headings) with a clean, readable body font. Some proven combinations:

• Playfair Display + DM Sans — Editorial, elegant

• Sora + Inter — Modern, technical

• Fraunces + Nunito — Warm, friendly

• Cabinet Grotesk + Satoshi — Contemporary, bold

💡 Tip: All Google Fonts are available in Framer for free. Start typing in the font search and Google Fonts results appear automatically — no importing needed.