Custom Fonts Squarespace

Method 1: Adding Google Fonts to Squarespace

Step 1: Choose Your Font on Google Fonts

Go to fonts.google.com and find the font you want. Click on the font to open its detail page. Select the weights you need - regular (400) and bold (700) cover most use cases. Click "Get embed code" and copy the link tag.

Step 2: Add the Font Link to Code Injection

Go to Settings > Advanced > Code Injection > Header. Paste the Google Fonts link tag. For example: <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Step 3: Apply the Font with Custom CSS

Go to Design > Custom CSS and add rules that reference the font family. Apply it to headings, body text, navigation, or specific elements:

h1, h2, h3 { font-family: 'Inter', sans-serif; } body { font-family: 'Inter', sans-serif; }

Save and preview. The custom font should now display across your site on the elements you targeted.

Method 2: Adding Adobe Fonts to Squarespace

Step 1: Create a Web Project on Adobe Fonts

Log in to fonts.adobe.com, browse or search for your font, and click "Add to Web Project." Create a new project or add to an existing one. Select the weights and styles you need. Adobe generates an embed code - a script tag or link tag.

Step 2: Add the Adobe Fonts Code to Code Injection

Copy the embed code from Adobe Fonts and paste it into Settings > Advanced > Code Injection > Header. Adobe Fonts loads through a JavaScript snippet that authenticates your account and serves the font files.

Step 3: Apply with Custom CSS

Use the font family name from your Adobe Fonts project in Custom CSS rules, the same way as Google Fonts. Adobe Fonts provides the exact CSS font-family name on the project page - copy it exactly to ensure the font loads correctly.

Method 3: Self-Hosting Custom Font Files

When to Self-Host

Self-host when you have a custom typeface from a type foundry that is not available on Google Fonts or Adobe Fonts. You will need the font files in web-compatible formats - WOFF2 is the modern standard with the best compression. WOFF is a fallback for older browsers.

Step 1: Upload Font Files

Squarespace does not have a traditional file manager, but you can upload font files through a workaround. Create a page with a Link Block, upload the font file as a downloadable asset, and copy the file URL. Alternatively, host the font file on a CDN or cloud storage service (like Cloudflare R2 or Amazon S3) and reference the URL directly.

Step 2: Add @font-face Rules

In Design > Custom CSS, add @font-face rules that load your font files:

@font-face { font-family: 'YourCustomFont'; src: url('YOUR_FONT_URL.woff2') format('woff2'), url('YOUR_FONT_URL.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

Add separate @font-face rules for each weight and style (regular, bold, italic). The font-display: swap property ensures text remains visible while the font loads, preventing invisible text during page load. For a detailed custom font walkthrough, our guide to adding custom fonts in Squarespace covers every step of the process.

Step 3: Apply with CSS

Reference your custom font family in CSS rules the same way as any other font. Apply it to the elements where you want it to appear - headings, body text, navigation, or specific sections.

Font Performance Optimization

Limit Font Weights

Every font weight is a separate file download. Loading six weights (thin, light, regular, medium, bold, extra-bold) means six file downloads before the text renders. Most sites need only two weights - regular (400) and bold (700). Some can get away with just one. Remove any weights you are not actively using in your content.

Use font-display: swap

The font-display: swap CSS property tells the browser to show text immediately using a fallback font while the custom font loads, then swap to the custom font once it is ready. This prevents the "flash of invisible text" that makes pages feel slow. Add this property to every @font-face rule and Google Fonts link (append &display=swap to the URL).

Preload Critical Fonts

Add a preload link for your most important font file in Code Injection Header. This tells the browser to start downloading the font immediately rather than waiting until the CSS parser encounters it:

<link rel="preload" href="YOUR_FONT_URL.woff2" as="font" type="font/woff2" crossorigin>

Preload only one or two font files - your primary heading font and your body font. Preloading too many files can actually slow things down. For page speed optimization, our Squarespace page speed guide covers font performance in detail.

Typography Best Practices for Squarespace

Use no more than two font families. One for headings and one for body text. More than two creates visual noise and increases load time. A single font family used at different weights can also work well.

Ensure readability at all sizes. Body text should be at least 16 pixels on desktop and mobile. Line height should be 1.5 to 1.8 for body text. Letter spacing should be normal or slightly increased for small text and slightly decreased for large headings.

Match your fallback font. In your CSS font-family declaration, include a system fallback that is visually similar to your custom font. If your custom font is a geometric sans-serif, use font-family: 'YourFont', 'Helvetica Neue', Arial, sans-serif. This minimizes the visual jump when the font swaps. For typography strategies, our Squarespace design tips guide covers font pairing and visual hierarchy.

Test on Windows and Mac. Fonts render differently on different operating systems. A font that looks crisp on macOS may appear slightly heavier or lighter on Windows. Test on both platforms to ensure consistent readability. For CSS fine-tuning, our guide to adding custom CSS to Squarespace covers font rendering properties.

Troubleshooting Custom Font Issues

Font Not Loading

Check that the font URL in your Code Injection or @font-face rule is correct and accessible. Open the URL directly in a browser - if it does not load a font file, the URL is wrong. For Google Fonts, verify the link tag syntax. For self-hosted fonts, confirm the file is publicly accessible.

Font Loads on Desktop but Not Mobile

Some mobile browsers handle font loading differently. Ensure your @font-face rule includes the WOFF2 format (best mobile support) and has font-display: swap set. Check that the font URL uses HTTPS - mixed content is blocked on mobile browsers.

Font Looks Different Than Expected

Verify you loaded the correct font weight. A font displaying as too thin or too heavy usually means the wrong weight file was loaded. Also check for CSS conflicts - your template's default font-weight property may override the weight you intended. Use browser DevTools to inspect the computed font properties on the affected element. For broader site troubleshooting, our Squarespace customization guide covers CSS debugging techniques.

Make Your Typography Match Your Brand

Custom fonts transform a Squarespace site from generic to branded. The right typeface communicates your personality before visitors read a single word - and consistent typography across your site builds the visual recognition that keeps people coming back.

Choose your fonts deliberately, load only the weights you need, optimize for performance, and test across devices and browsers. Typography is one of the smallest changes you can make with one of the biggest impacts on how your site feels.