Free Tool

Custom Font Injector

Add any Google Font or custom typeface to your Squarespace site. Choose which elements get the new font — headings, body text, navigation, buttons, or everything.

Why this matters

Squarespace limits you to their built-in font library. If your brand uses a specific typeface — or you want access to the full Google Fonts catalog — you need custom code. This tool generates the exact code with the right Squarespace selectors so your chosen font actually applies where you want it.

Font Source

Google Fonts URL

Go to fonts.google.com, pick a font, click "Get embed code", and paste the URL from the <link> tag here.

Apply To

Font Weight

Font Style

Fallback Font

Live Preview

Brand
HomeAboutShopContact

The Quick Brown Fox

Jumps Over the Lazy Dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Code Injection > Header
<!-- Google Font: Playfair Display -->
<!-- Paste this in Settings > Advanced > Code Injection > Header -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">

<style>
h1, h2, h3, h4, h5, h6,
.header-title-text,
.blog-title {
  font-family: 'Playfair Display', serif !important;
}
</style>

How to add this to Squarespace

  1. Copy all the code above (it includes both the <link> tag and <style> block).
  2. Go to Settings → Advanced → Code Injection.
  3. Paste into the Header field.
  4. Click Save. The font loads from Google's CDN and applies to your selected elements.

A little over your head?

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

Long Drive MarketingTalk to Long Drive Marketing →