Squarespace's built-in font library includes hundreds of typefaces from Adobe Fonts and Google Fonts, but it does not include every font. If your brand uses a licensed typeface, a niche Google Font that Squarespace has not added, or a self-hosted font file, you need code injection. This is the most common customization question in the Squarespace community, and most of the answers floating around are incomplete or outdated.
This guide covers both methods for adding custom fonts in 2026: the Google Fonts approach (easiest) and the @font-face approach (for self-hosted files). It also shows you the exact CSS selectors to target headings, body text, navigation, and buttons separately.
Method 1: Google Fonts via Code Injection
Google Fonts is the fastest way to add a custom font to Squarespace. You load the font from Google's CDN in your header code injection, then apply it with CSS. The font loads from Google's globally distributed servers, which means fast delivery worldwide.
<!-- Add to 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=DM+Sans:wght@400;500;700&family=DM+Serif+Display&display=swap" rel="stylesheet">Three things to note here. First, the preconnect links tell the browser to start the connection to Google's font servers before it actually needs the font files, saving 100 to 200 milliseconds. Second, the display=swap parameter ensures text is visible immediately with a fallback font, then swaps in your custom font once it loads. Without this parameter, visitors see invisible text during the font download. Third, only load the weights you actually use. Every extra weight adds to your page load time.
Method 2: Self-Hosted Fonts with @font-face
If your font is not on Google Fonts, or if you have a licensed font file (OTF, TTF, WOFF, WOFF2), you can self-host it. Upload the font file to a hosting service or your Squarespace site files, then declare it with @font-face in your Custom CSS panel.
/* Add to Design > Custom CSS */
@font-face {
font-family: 'BrandFont';
src: url('https://your-domain.com/fonts/BrandFont.woff2') format('woff2'),
url('https://your-domain.com/fonts/BrandFont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'BrandFont';
src: url('https://your-domain.com/fonts/BrandFont-Bold.woff2') format('woff2'),
url('https://your-domain.com/fonts/BrandFont-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}Always include both WOFF2 and WOFF formats for maximum browser compatibility. WOFF2 is smaller and loads faster, but WOFF serves as a fallback for older browsers. The font-display: swap directive works the same way here as the Google Fonts parameter: it prevents invisible text during loading.
Applying Fonts to the Right Elements
Loading a font is only half the job. You also need to tell Squarespace which elements should use it. This is where most tutorials fall short. They show a blanket body { font-family: ... } rule and call it done, but that misses headings, navigation, buttons, and other elements that inherit from different sources.
/* Headings */
h1, h2, h3, h4,
.header-title-text,
.blog-title {
font-family: 'DM Serif Display', serif !important;
}
/* Body text, paragraphs, list items */
body, p, li, span, a,
.sqs-block-content p,
.blog-excerpt p {
font-family: 'DM Sans', sans-serif !important;
}
/* Navigation links */
.header-nav-list a,
.header-menu-nav-list a {
font-family: 'DM Sans', sans-serif !important;
font-weight: 500 !important;
}
/* Buttons */
.sqs-block-button-element,
.header-actions .btn {
font-family: 'DM Sans', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
}
/* Footer text */
.footer-block p,
.footer-block a {
font-family: 'DM Sans', sans-serif !important;
}The !importantdeclarations are necessary because Squarespace's theme CSS is injected with high specificity. Without them, your font-family rules will be overridden by the theme's defaults. This is standard practice for Squarespace custom CSS, not a hack.
Common Mistakes
Loading too many weights. Each font weight is a separate file download. If you load 300, 400, 500, 600, and 700 but only use 400 and 700, you are tripling your font payload for no reason. Only request the weights you actually apply in your CSS.
Missing the preconnect hints. Without preconnect, the browser has to discover the Google Fonts domain, perform a DNS lookup, and negotiate a TLS connection before it even starts downloading the font. Adding preconnect links saves this entire round trip.
Forgetting the mobile menu. The mobile hamburger menu uses a different set of selectors than the desktop nav. Target .header-menu-nav-list a to make sure your custom font applies in the mobile overlay as well.
For more Squarespace customization, check out our guide to essential code injections or browse all of our free Squarespace tools.
