How to Change Fonts in Squarespace

A clean type system is the quickest way to make a Squarespace 7.1 site feel designed. You don’t need to wrangle code; the built‑in Fonts panel handles global families, sizes, and spacing for headings, paragraphs, buttons, and navigation. If you ever need fine‑grained control, our short guide on targeted tweaks with Custom CSS shows safe overrides. And if your promotional text needs its own look, see how to style the announcement bar typography.

This Squarespace font guide walks you through how to change font sitewide, how to edit font per component, and how to increase font size on desktop and mobile without breaking your layout.

Overview

Changing fonts in Squarespace (7.1) is a two‑step dance: set a global pairing, then refine sizes and spacing.

• Start in Fonts. Go to Design → Fonts. Pick a preset to get a sensible heading/body combo fast.
• Refine globally. Adjust headings, paragraphs, and UI text (buttons, nav, forms) under their respective groups.
• Tune readability. Use the scale, line-height, and letter‑spacing controls to make text comfortable on every screen.
• Keep it accessible. Favor 16–18px body text, generous line-height, and sufficient contrast.

If you only remember one thing: choose a preset, then tweak scale and line-height before you chase individual sizes. It’s the fastest way to change font Squarespace‑wide with minimal effort.

Preview typography changes instantly with MicroEdits

Sometimes you need to see a few font pairs and sizes in situ—on your actual pages—before committing. MicroEdits lets you describe the change in plain English and preview it live. Try phrases like: Use Inter for body text at 18px with 1.6 line-height or Make H1 bolder and tighten letter‑spacing slightly. You’ll see the change across your site immediately, can share a preview link, and roll back in one click.

• No coding required. Just describe what you want.
• Instant previews. See headings, paragraphs, buttons, and nav update sitewide.
• Safe to explore. Compare options, share, and revert easily.
• Works on existing sites. Whether your site is on Squarespace, WordPress, or Shopify, it just works.

Use the Fonts panel and presets

Presets are the fastest way to edit font Squarespace‑wide.

1. Open Fonts

   • From any page, click Edit → Design → Fonts.

2. Pick a preset

   • Under Font Packs, choose a pair that fits your brand. Presets cover Headings + Paragraph + UI so everything aligns out of the box.

3. Customize families and weights

   • In Global Text Styles, adjust:
     • Headings: Choose a display or serif family; set weight (e.g., 600–700).
     • Paragraphs: Choose a readable sans or serif; use 400–500 for body.
     • UI Text (buttons, nav, forms): Keep it sturdy and legible; often the same family as body.

4. Save

   • Click Save to apply changes sitewide.

Custom fonts (optional)

If your brand requires a specific font:

• Upload and define a fallback. Host WOFF2 files, then declare a stack that falls back to system fonts if the webfont fails to load.
• Licensing matters. Ensure your license allows web embedding.

Example of a safe fallback stack:

/* Example font with swap and robust fallbacks */
@font-face {
  font-family: "AcmeSans";
  src: url("https://example.com/fonts/AcmeSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body {
  font-family:
    "AcmeSans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

Squarespace has a helpful overview on fonts here: Using fonts in Squarespace.

Set sizes, line-height, and scales

This is where readability happens. To change font size Squarespace‑wide without micromanaging every element:

• Base size and scale. In Fonts, use the type scale controls to proportionally size headings and paragraphs. Start with a base of 16–18px.
• Line-height. Body text reads best at ~1.5–1.7. Headlines can be tighter (1.2–1.4).
• Letter‑spacing. Slightly tighten bold, large headlines; loosen all‑caps UI text a touch for clarity.
• Responsive tweaks. Use mobile size controls to increase font size Squarespace uses on small screens so lines don’t feel cramped.

Quick targets:

If you need a one‑off tweak, see the safe patterns in our Custom CSS guide for Squarespace.

Style buttons and navigation text

Your calls‑to‑action should stand out, not shout.

• Buttons

  • Primary vs. Secondary: Use weight and case to signal hierarchy (Primary: heavier or all‑caps; Secondary: regular case).
  • Size: Keep to 14–16px on desktop and 15–17px on mobile for tap targets.
  • Letter‑spacing: 0–0.05em for mixed case; up to ~0.1em for all‑caps.

• Navigation

  • Keep labels crisp and short. Set a size you can read at arm’s length.
  • Ensure hover/focus states are visible. On smaller screens, bump size slightly to preserve legibility.
  • For sitewide promos, align your nav and button styles with any announcement bar text to avoid visual whiplash.

Accessibility and performance

Good typography includes everyone and loads fast.

• Contrast: Body text should meet WCAG 2.2 AA (4.5:1). See the guidance at Contrast (Minimum).
• Weights: Limit to 2–3 weights/styles per family (e.g., 400, 600). Each file adds cost.
• Formats: Prefer WOFF2 for custom fonts. Fewer, smaller files = faster paints.
• FOUT/FOIT: If you notice flashes or invisible text, use font-display: swap when defining custom fonts so the browser shows fallbacks immediately. MDN explains the behavior here: font-display.
• Line length: Aim for ~45–75 characters per line for body copy. Increase margins or font size if lines run long.
• Test real pages: Typography that looks perfect on a style preview can feel off with dense paragraphs or data tables. Check a blog post, a product page, and your homepage before you call it done.
• Google’s guidance: For deeper performance tips, see Optimize webfont loading.

FAQ

How do I change my sitewide fonts in Squarespace 7.1?

Open any page, click Edit, then go to Design → Fonts. Choose a preset under Font Packs to set headings, paragraphs, and UI text in one move. Then fine‑tune families and weights in Global Text Styles. Save to apply globally. This is the fastest, safest way to edit font Squarespace‑wide without touching code.

How can I change font size on mobile only?

In Design → Fonts, open the size controls for each text group and switch to the mobile preview. Adjust the mobile sliders to increase font size Squarespace uses on small screens—especially body text and navigation. Keep body at 16–18px, and avoid shrinking button labels; tap targets should stay comfortably large.

Can I upload a custom font to Squarespace?

Yes, with a proper web license. Upload the files (ideally WOFF2) and declare them with a robust fallback stack. Keep file count low (regular and semibold are usually enough) to avoid slowing first paint. Use font-display: swap so text remains visible while custom fonts load. See Squarespace’s guide: Using fonts in Squarespace.

Can I override fonts for a single section or block?

Yes. Use block‑level controls where available (e.g., heading size options inside a block). For precise overrides—say, a hero only—add a targeted selector in Custom CSS tied to that section’s ID. Our short walkthrough on safe Custom CSS in Squarespace shows patterns that won’t cascade unpredictably.

Why do my fonts briefly look different when the page loads?

That’s normal font loading behavior: either a Flash of Unstyled Text (FOUT) or Invisible Text (FOIT). To minimize it, limit the number of font files, prefer WOFF2, and—if you’re using custom fonts—set font-display: swap so fallbacks appear immediately, then swap to your brand font. MDN’s font-display article explains the tradeoffs.

What’s a good starting point for sizes and spacing?

Use 16–18px for body, line-height around 1.6, and type scale that puts H1 near 2–2.5× body size. Tighten headline line-height to ~1.25. For UI (buttons, nav), stick to 14–16px desktop and 15–17px mobile. Most sites feel “designed” once body copy is comfortable and headings have clear hierarchy.