Why Can't I Find the Font I Want to Use on Squarespace?

You have a specific font in mind for your Squarespace site but cannot find it in the built-in font library - this is a common limitation, but you have several ways to use any font you want. Squarespace includes hundreds of Google Fonts and Adobe Fonts (via a connected Adobe account) in its built-in library. For fonts outside these collections, you can upload custom font files and apply them using Custom CSS.

Squarespace's font library covers most design needs, but it does not include every font available. If the font you want is not in the built-in options, you can add it through Google Fonts integration, Adobe Fonts, or by uploading custom font files with CSS. This guide covers every method for getting any font working on your Squarespace site.

Why Can't I Find the Font I Want to Use on Squarespace?

I recommend checking the built-in library thoroughly before uploading custom fonts - Squarespace's font options have expanded significantly, and your font may already be available through Adobe Fonts or the Google Fonts integration. Squarespace includes Google Fonts and Adobe Fonts integration on every plan. Use coupon code OKDIGITAL10 for 10% off any Squarespace plan.

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?

Squarespace's font picker includes Google Fonts, system fonts, and Adobe Fonts (if connected). If your font is not from these sources, it will not appear in the picker. You can upload it manually using Custom CSS or check if an Adobe Fonts connection makes it available.

Can I use any font on Squarespace?

Yes, with the right method. Google Fonts and Adobe Fonts are available through the built-in picker. Any other font can be uploaded as a WOFF2 file and applied using Custom CSS, provided you have the proper web license for the font.

How do I upload a custom font to Squarespace?

Go to Design > Custom CSS > Manage Custom Files. Upload your WOFF2 font file. Then add @font-face CSS to declare the font and apply it to the HTML elements you want. The full process takes about 5 minutes.

Does Squarespace support Adobe Fonts?

Yes. Connect your Adobe Creative Cloud account through Design > Fonts > Adobe Fonts. Once connected, thousands of premium fonts become available in the Squarespace font picker alongside the built-in options.

Why is my custom font not showing on Squarespace?

Common causes include wrong file format (use WOFF2), font name mismatch between @font-face and CSS rules, CSS specificity being overridden by Squarespace's default styles, or browser caching. Check each of these in order.

Are Google Fonts free to use on Squarespace?

Yes. All Google Fonts are open source and free for web use. Most fonts in Squarespace's built-in font picker are Google Fonts. Some Google Fonts not in the picker can be added via code injection.

What font format should I use for Squarespace custom fonts?

Use WOFF2 for the best combination of browser compatibility and small file size. WOFF is also acceptable. Convert TTF or OTF files to WOFF2 using Font Squirrel's free Webfont Generator before uploading.

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.

Keep Reading

* Read the rest of the post and open up an offer
Top