Where Does Squarespace Get Its Fonts?
Squarespace pulls fonts from three sources. Understanding where fonts come from helps you find the one you want - or determine the right method for adding it manually.
Built-In System Fonts
Squarespace includes a curated selection of system and web-safe fonts that load instantly because they are already installed on most devices. These include fonts like Arial, Georgia, Helvetica, and Times New Roman. They are always available regardless of your plan or template.
Google Fonts
The majority of Squarespace's font library comes from Google Fonts - a free, open-source collection of over 1,500 font families. These fonts are loaded from Google's CDN and are optimized for web performance. Most fonts you see in Squarespace's font picker are Google Fonts. If you saw a font on another website and want to use it on Squarespace, check whether it is a Google Font first - it is probably already available. For font selection guidance, our guide to best Squarespace fonts covers pairings for every brand style.
Adobe Fonts
Squarespace integrates with Adobe Fonts (formerly Typekit). If you have a Creative Cloud subscription, you can connect your Adobe account to Squarespace and access thousands of additional premium fonts. Go to Design > Fonts > Adobe Fonts and connect your account. This is the easiest way to access premium fonts without uploading anything manually.
How to Find a Specific Font in Squarespace
Before assuming your font is missing, search for it properly. Squarespace's font picker can be difficult to navigate when you know exactly what you want.
Search by Name in the Font Picker
Open Design > Fonts (or Site Styles > Fonts on 7.1). Click on any font field and use the search bar at the top of the font dropdown. Type the exact font name. If it appears, select it. If not, it is not in the built-in library and you need one of the methods below.
Check Adobe Fonts Integration
If you have an Adobe Creative Cloud subscription, connect it before giving up on finding your font. Many professional fonts that are not in Google Fonts are available through Adobe Fonts. Go to Design > Fonts > Adobe Fonts to connect. Once connected, Adobe fonts appear in the font picker alongside the built-in options.
How to Add a Custom Font to Squarespace
If your font is not available through the built-in library or Adobe Fonts, you can upload it manually using Custom CSS. This works on any Squarespace plan.
Step 1: Get the Font File
You need the font file in a web-compatible format - WOFF2 is ideal, WOFF is also good. If you have a TTF or OTF file, convert it to WOFF2 using a free tool like Font Squirrel's Webfont Generator. Make sure you have the license to use the font on a website - many desktop fonts require a separate web license.
Step 2: Upload the Font File
Go to Design > Custom CSS. Scroll down below the CSS editor and click Manage Custom Files. Upload your WOFF2 (or WOFF) font file. After uploading, click the file name - Squarespace will insert the file URL into the CSS editor. Copy this URL and delete the inserted text.
Step 3: Declare the Font with @font-face
Add the following CSS to your Custom CSS editor, replacing the placeholder values with your font name and the URL you copied:
@font-face {
font-family: 'YourFontName';
src: url('YOUR-FONT-FILE-URL.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
The font-display: swap property ensures text remains visible while the custom font loads, preventing invisible text during page load.
Step 4: Apply the Font to Elements
Now tell Squarespace which elements should use your custom font:
h1, h2, h3 {
font-family: 'YourFontName', sans-serif;
}
p, li, a {
font-family: 'YourFontName', sans-serif;
}
Adjust the selectors based on where you want the font applied - headings only, body text only, or everywhere. The fallback font (sans-serif) displays if the custom font fails to load. For broader CSS customization, our guide to Squarespace custom CSS covers every styling approach.
How to Add Google Fonts Not in Squarespace's Picker
Some Google Fonts exist in the Google Fonts library but are not included in Squarespace's built-in picker. You can add these using a code injection approach without uploading any files.
Go to Settings > Advanced > Code Injection > Header. Add a link to the Google Fonts stylesheet:
Then in Custom CSS, apply the font:
h1 { font-family: 'Font Name', sans-serif; }
Replace "Font Name" and "Font+Name" with the actual font name from Google Fonts. This method loads the font directly from Google's servers - no file upload needed.
Common Reasons Your Font Is Not Showing Up
If you have added a custom font but it is not displaying, check these common issues. For other platform issues, our guide to Squarespace troubleshooting and issues covers common problems and fixes.
Font File Format Not Supported
Browsers require web font formats (WOFF, WOFF2). Desktop font formats (OTF, TTF) may work in some browsers but not all. Always convert to WOFF2 for maximum compatibility and smallest file size.
CSS Specificity Override
Squarespace's built-in styles may override your custom CSS if your selectors are not specific enough. Use more specific selectors or add !important as a last resort:
h1 { font-family: 'YourFontName', sans-serif !important; }
Font Name Mismatch
The font-family name in your @font-face declaration must exactly match the name you use in your CSS rules. A single character difference - including capitalization - will cause the font to fail silently.
Caching
After adding custom CSS, clear your browser cache or view the site in an incognito window. Squarespace and your browser may serve cached versions of your stylesheet. For help choosing fonts, see our guide on choosing any font on Squarespace.
Font Licensing: What You Need to Know
Not every font is free to use on a website. Fonts have licenses just like software, and using a font without the proper license can result in legal issues.
Free for web use: Google Fonts are open source and free for any use. Font Squirrel offers free fonts with web-compatible licenses.
Requires a web license: Many premium fonts (from foundries like Hoefler, Monotype, or commercial type foundries) require purchasing a separate web license. A desktop license does not cover web use.
Adobe Fonts: Fonts accessed through Adobe Fonts are licensed for web use through your Creative Cloud subscription. No additional licensing is needed when using the Squarespace-Adobe integration.
Frequently Asked Questions
Why can't I find my font in Squarespace?
Can I use any font on Squarespace?
How do I upload a custom font to Squarespace?
Does Squarespace support Adobe Fonts?
Why is my custom font not showing on Squarespace?
Are Google Fonts free to use on Squarespace?
What font format should I use for Squarespace custom fonts?
Get Any Font Working on Squarespace
Squarespace's font library covers most needs through Google Fonts and Adobe Fonts integration. For fonts outside these collections, upload the file and apply it with Custom CSS. Check licensing before uploading, use WOFF2 format for best performance, and always include font-display: swap to prevent invisible text during loading.
* Read the rest of the post and open up an offer