Typography is the single biggest lever you have for making a Squarespace site feel custom. The built-in font picker covers the basics, but CSS gives you full control — from loading any Google Font to fine-tuning heading weights, link colors, blockquote styling, and body text size. Every snippet below goes in Design → Custom CSS unless noted otherwise.
1. Add Custom Google Fonts
Squarespace's built-in font library includes a decent selection, but it's a fraction of what Google Fonts offers. If you want Inter, Space Grotesk, DM Sans, or any of the 1,500+ families on Google Fonts, you need to load them yourself via Code Injection and then apply them with CSS.
The process has two parts. First, you add a <link> tag in your site's header to load the font files from Google's CDN. Second, you write CSS rules to apply the font to whichever elements you want — body text, headings, navigation, or all of the above. The preconnecthint speeds up the initial connection to Google's servers.
Go to Settings → Advanced → Code Injection → Header and paste the HTML portion. Then add the CSS portion in Design → Custom CSS, or include it in a <style> tag right alongside the link tags in Code Injection.
HTML (goes 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">
CSS (goes in Custom CSS or a <style> tag in Code Injection):
/* 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;
}Result: Your site loads Inter (or whichever Google Font you chose) and applies it globally. The display=swap parameter ensures text remains visible while the font file downloads, preventing a flash of invisible text.
Tip
Load only the weights you actually use. Each weight adds to page load time. If you only need 400 and 700, don't request 300, 500, and 600 as well. You can also load multiple families in one request: family=Inter:wght@400;700&family=Playfair+Display:wght@400;700.
Tip
Want to apply different fonts to different elements? Use specific selectors: .header-title-text for the site title, .header-nav-item a for navigation links, and .sqs-block-content p for body paragraphs. This lets you mix a serif heading font with a sans-serif body font.
2. Change Heading Fonts
Squarespace 7.1 applies heading fonts through CSS custom properties and inline styles baked into the template. The Design panel gives you some control, but if you want a specific font stack, precise weights per heading level, or tighter letter-spacing than the panel allows, CSS overrides are the way to go.
Target h1 through h4 directly. The !importantflag is necessary here because Squarespace injects its own font declarations with high specificity. If you're using a font that's not built into Squarespace (like one loaded via Google Fonts), make sure the font is loaded before the CSS tries to apply it.
Setting different sizes and weights per heading level creates a clear visual hierarchy. H1 should be your largest, boldest heading. H2 and H3 step down in size but should still feel related through shared font-family and proportional weight.
h1, h2, h3, h4 {
font-family: 'Georgia', 'Times New Roman', serif !important;
}
h1 {
font-size: 48px !important;
font-weight: 700 !important;
letter-spacing: -0.5px;
}
h2 {
font-size: 36px !important;
font-weight: 600 !important;
}
h3 {
font-size: 24px !important;
font-weight: 600 !important;
}Result: All headings switch to Georgia with a clear size hierarchy. H1 at 48px commands attention, H2 at 36px handles section breaks, and H3 at 24px works for sub-sections. The negative letter-spacing on H1 tightens the large text for a more polished look.
Tip
The built-in font names can be found in the Fonts panel under Design → Fonts. If you want to use one of those rather than loading an external font, inspect the element in your browser to find the exact font-family value Squarespace uses. Common built-in options include Montserrat, Lato, Raleway, and Merriweather.
3. Change Link Colors Sitewide
Global link colors in Squarespace 7.1 are controlled per color theme in the Design panel, but that's an all-or-nothing setting. CSS lets you set exact hex values, add hover transitions, and control underline offset — details that the Design panel doesn't expose.
Target .sqs-block-content a instead of just a to avoid accidentally restyling navigation links, buttons, and footer links. The .sqs-block-contentscope limits your changes to links inside text and image blocks — the content area where visitors actually read.
Always define a hover state. A link that doesn't change on hover feels broken. Even a subtle color shift signals interactivity and improves usability. The text-underline-offset property adds a few pixels of breathing room between the text and the underline, which significantly improves readability.
/* Content area links only */
.sqs-block-content a {
color: #e63946 !important;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.sqs-block-content a:hover {
color: #c1121f !important;
}
/* If you want ALL links sitewide */
a {
color: #e63946 !important;
}Result: Links in your content blocks turn red (#e63946) with a subtle underline offset. On hover, they darken to #c1121f with a smooth 0.2-second transition. Navigation and button links remain unchanged because of the scoped selector.
Warning
Avoid styling visited links (a:visited) a drastically different color unless you have a specific UX reason. A bright visited-link color can make your content area look messy on pages with many links. If you do style it, keep it close to your default link color — just a shade darker or lighter.
4. Style Blockquotes
Blockquotes in Squarespace 7.1 use the standard <blockquote>HTML element, but the default styling is minimal — often just indented text. A well-styled blockquote with a left border accent, background color, and italic text turns a plain quote into a visual element that breaks up long-form content and draws the reader's eye.
The pattern below uses a bold left border in your accent color, a subtle background tint, and generous padding. The font-style: italic is a classic convention that tells readers this is quoted material. Pair it with a slightly larger font size (1.1em) so the quote feels elevated above the surrounding body text.
blockquote {
border-left: 4px solid #e63946 !important;
background-color: #f8f9fa;
padding: 20px 24px !important;
margin: 24px 0 !important;
font-style: italic;
font-size: 1.1em;
color: #333;
}
blockquote p {
margin: 0 !important;
line-height: 1.7;
}Result: Blockquotes display with a red left border, light gray background, italic text, and comfortable padding. The blockquote p rule removes default paragraph margins inside the quote so spacing stays consistent.
Tip
To add a decorative quotation mark, use a ::before pseudo-element: blockquote::before { content: '“'; font-size: 60px; color: #e63946; }. Position it absolutely for precise placement. This adds a typographic flourish that makes testimonial sections look especially polished.
5. Change Body Text Size
Body text size is the foundation of your site's readability. The Squarespace Design panel sets a base size, but CSS gives you pixel-level control — plus the ability to set different sizes for desktop and mobile using media queries.
Target .sqs-block-content p rather than bodyto avoid unintended cascading effects on navigation, buttons, and footer elements. For readability, body text should sit between 16–18px on desktop and 15–16px on mobile. Pair it with a line-height of 1.6–1.8 — this is the vertical breathing room between lines, and it has a massive impact on how comfortable long-form content feels to read.
The mobile breakpoint at 767px catches most phones and small tablets. Dropping the font size by 1px and tightening the line-height slightly keeps text proportional on smaller screens without feeling cramped.
/* Global body text */
.sqs-block-content p {
font-size: 17px !important;
line-height: 1.75 !important;
color: #333333;
}
/* Slightly smaller on mobile */
@media screen and (max-width: 767px) {
.sqs-block-content p {
font-size: 16px !important;
line-height: 1.65 !important;
}
}Result: Body paragraphs render at 17px with generous 1.75 line-height on desktop, then scale down to 16px / 1.65 on mobile. The #333333 color is softer than pure black, reducing eye strain on long reads while maintaining strong contrast.
Tip
If you want to control the maximum width of text lines for readability, add max-width: 680px to your paragraph rule. Lines longer than about 75 characters become hard to track from the end of one line to the start of the next. This is especially useful on wide-screen layouts where text blocks stretch edge to edge.
