Skip to content
All Answers
Typography

How do I add a custom Google Font to Squarespace?

Add the Google Fonts stylesheet link in Settings > Advanced > Code Injection > Header. Then use CSS to apply the font to any element. You can load multiple weights in one request.

Once the font is loaded, apply it with font-family. Always include a fallback font in case the Google Font fails to load. You can target headings, body text, or nav separately.

<!-- Add this in Code Injection > Header -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
  /* Apply to all body text */
  body, body * {
    font-family: 'Inter', -apple-system, sans-serif !important;
  }

  /* Or target just headings */
  h1, h2, h3, h4 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700;
  }
</style>
Inject custom fonts with our Font Injector toolTry it free →

Related Questions

Typography

How do I change the heading font in Squarespace with CSS?

Typography

How do I change the link color across my Squarespace site?

Typography

How do I style blockquotes in Squarespace?

Typography

How do I change the body text size in Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →