What Fonts Are Available on Squarespace?
Squarespace pulls fonts from three sources, giving you a combined library of over 1,600 options.
Google Fonts (600+)
The majority of Squarespace's built-in font library comes from Google Fonts, a free, open-source collection. These fonts are optimized for web use and load quickly. Popular choices like Montserrat, Open Sans, Lato, Playfair Display, and Roboto are all available directly in the font picker.
Adobe Fonts (1,000+)
Connect your Adobe Creative Cloud account to unlock over 1,000 additional premium fonts. Go to Design > Fonts > Adobe Fonts to connect. Once linked, Adobe fonts appear alongside Google Fonts in the picker. This includes professional typefaces from foundries like Adobe Originals, Monotype, and others not available through Google Fonts.
System Fonts
Squarespace also includes web-safe system fonts (Arial, Georgia, Helvetica, Times New Roman) that load instantly because they are already installed on most devices. These are reliable fallback options.
Which Fonts Work Best on Squarespace?
With 1,600+ options available, the real challenge is narrowing down to fonts that actually serve your site well. The best choice depends on your industry, your brand personality, and where the font will be used (heading vs. body text).
For body text, legibility is the top priority. Fonts used at 16-18px need to be clean and easy to scan. Open Sans and Lato are the most consistently readable choices across devices and browsers. Both have generous letter spacing and perform well at smaller sizes. Merriweather is a strong serif option if you want a more editorial feel for long-form content.
For headings, you have more room to express personality. Playfair Display works well for elegant or luxury brands (think spas, fine dining, wedding planners). Montserrat suits modern and minimal brands. Raleway adds a stylish geometric look suited to creative agencies and portfolios. Oswald gives a bold, high-impact look for brands that want to project authority.
Some proven pairings available directly in Squarespace's font picker: Playfair Display (headings) with Lato (body); Montserrat (headings) with Open Sans (body); Raleway (headings) with Merriweather (body). These combinations balance contrast with harmony. The heading font draws attention; the body font sustains it. For more pairing ideas and recommendations, our guide to best Squarespace fonts covers combinations for every brand style.
How to Change Fonts on Squarespace
The process differs slightly between 7.0 and 7.1, but the core steps are the same.
On Squarespace 7.1
Go to Design > Site Styles > Fonts. Click on any font category (Headings, Paragraphs, Buttons, or Miscellaneous). Click the font family name, then Browse All Fonts. Search by name or scroll the list. Select a font. Adjust weight, size, letter spacing, and line height. Click Save.
On Squarespace 7.0
Go to Design > Site Styles. Find the typography section for the element you want to change (heading, body text, etc.). Click the font family dropdown and Browse All Fonts. Search or scroll to find your font. Save your changes.
Searching for a Specific Font
Use the search bar at the top of the font browser. Type the exact font name. If it appears, select it. If it does not appear, the font is not in Squarespace's built-in library, but you can still use it via custom upload (covered below). For font pairing ideas, our guide to best Squarespace fonts covers combinations for every brand style.
How to Add a Font That Is Not in Squarespace
If your desired font is not available through Google Fonts or Adobe Fonts, you can upload it manually.
Step 1: Get the Font File
You need the font in WOFF2 format (best) or WOFF. Convert TTF or OTF files using Font Squirrel's free Webfont Generator. Verify you have a web license for the font, as many desktop fonts require a separate license for web use.
Step 2: Upload to Squarespace
Go to Design > Custom CSS. Click Manage Custom Files below the CSS editor. Upload your font file. Click the filename and Squarespace inserts the file URL. Copy this URL.
Step 3: Declare with @font-face
Add this CSS to the Custom CSS editor:
@font-face {
font-family: 'YourFontName';
src: url('YOUR-FILE-URL.woff2') format('woff2');
font-display: swap;
}
Step 4: Apply to Elements
h1, h2, h3 { font-family: 'YourFontName', sans-serif; }
This applies your custom font to headings. Adjust the selectors for body text, buttons, or specific elements. For the full upload walkthrough, our guide to finding fonts on Squarespace covers every method. For advanced customization and features on Squarespace, Custom CSS opens up significant design possibilities beyond the built-in options.
Important Font Considerations
Fonts Display Differently Across Devices
The same font can render slightly differently on Windows vs Mac, Chrome vs Safari, and desktop vs mobile. This is due to different font rendering engines. Always test your font choices across multiple devices and browsers. Differences are usually subtle but noticeable on decorative or thin-weight fonts.
Font Retirement
Google and Adobe occasionally remove fonts from their libraries. If your site currently uses a retired font, it continues to work because the font is already cached. However, if you switch away from it, you cannot switch back. Squarespace will suggest a similar replacement, but it will not be identical.
Performance Impact
Each font you load adds to your page weight. Using 4-5 different fonts slows page loading noticeably. Stick to 2-3 fonts maximum: one for headings, one for body text, and optionally one for accents. Custom uploaded fonts add more weight than built-in fonts because they load from your site instead of a cached CDN.
Font Licensing
Google Fonts are free for any use. Adobe Fonts are licensed through your Creative Cloud subscription. Custom fonts may require purchasing a web license separately from a desktop license. Using a font without the proper license can result in legal issues.
How Squarespace Font Loading Affects Page Speed
Every font family and weight you load is a separate file the browser has to request. If you select Montserrat in weights 300, 400, 500, 600, and 700, that is five separate HTTP requests before your text can render. Each request adds latency. The practical fix: use only the weights your design actually requires. Most sites only need a regular weight (400) for body text and a bold weight (700) for headings. Trimming unused weights is one of the easiest speed gains available on Squarespace.
File format matters too. WOFF2 is the modern standard and produces significantly smaller files than older WOFF files, which means faster downloads. When uploading a custom font, always convert to WOFF2 first using a tool like Font Squirrel's Webfont Generator. The @font-face CSS template above already includes font-display: swap, which tells the browser to show text immediately using a fallback font while the custom font loads. Without it, text can be invisible for a moment on slower connections.
To check the real impact on your site, run your Squarespace URL through Google PageSpeed Insights. Look for "Eliminate render-blocking resources" or "Reduce unused CSS" in the report. If fonts are flagged, the fix is usually reducing font weights or removing a font family you are barely using. Built-in Google Fonts load from Google's CDN, which most browsers have already cached from other sites, making them faster than custom uploads in practice.
Can You Use Different Fonts on Different Pages?
Yes, with Custom CSS. Target a specific page using its collection ID and set a different font-family for that page. However, using different fonts across pages creates inconsistency that can confuse visitors and weaken your brand. Reserve per-page fonts for genuinely different contexts, like a portfolio page with a creative display font vs standard body font on service pages. For per-page styling, our guide to setting different styles per page covers the full process.
Squarespace Font Troubleshooting: When Fonts Don't Look Right
Choosing the right font is one thing. Getting it to display exactly the way you expect across every device and browser is another. These are the most common font problems on Squarespace sites and how to fix each one.
Font Looks Correct in Editor but Wrong on Published Site
This usually means browser caching. Clear your browser cache and reload the published site in an incognito window. If the font appears correctly there, your regular browser was showing a cached version of the old styles. Give it a few minutes and the live site will catch up.
Font Appears Correct on Desktop but Not on Mobile
Some fonts render with different weight or spacing on mobile operating systems. If a bold heading looks different on iOS versus Chrome on Windows, try adjusting the font weight one step (e.g., 700 to 600) and test again. Also check for Mobile Site Styles overrides in Site Styles, which some templates apply separately from desktop settings.
Custom Font Is Uploaded but Not Showing
Confirm your @font-face declaration in Custom CSS uses the exact URL generated by Squarespace when you uploaded the file. File names are case-sensitive and spaces must be encoded. Also verify font-display: swap is included in the declaration, as some browsers block font rendering without it. After uploading a new font file, clear cache and test in incognito before concluding there is a problem.
Font Loaded via Google Fonts But Missing from Site Styles Picker
Google Fonts imported through Code Injection do not appear in the Site Styles font picker. They are only accessible via Custom CSS. Use font-family: 'Font Name', sans-serif; in your CSS rules to apply them to specific elements. This is expected behavior, not a bug.
Font Loading Is Causing Slow Page Speed
Every font weight you load adds an HTTP request and file download. If you are loading three font families with four weights each, that is twelve separate font files. Limit yourself to two font families and two weights each (regular + bold). Remove unused fonts from Code Injection and Site Styles. For speed context, our guide to Squarespace page speed optimization covers font loading strategies in detail.
Frequently Asked Questions
Can I use any font I want on Squarespace?
How many fonts does Squarespace have?
How do I add Adobe Fonts to Squarespace?
Can I upload a custom font to Squarespace?
Do fonts affect Squarespace site speed?
What is the best font for a Squarespace website?
Choose From 1,600+ Fonts or Upload Your Own
Squarespace's built-in library covers most font needs. Connect Adobe Fonts for premium options. Upload custom fonts with CSS for anything else. Stick to 2-3 fonts, verify licensing, and test across devices for the best results.
* Read the rest of the post and open up an offer