How to Add Custom Fonts to Your Squarespace Site

Squarespace offers a fantastic selection of free fonts for your website, but sometimes you need that special font to maintain your branding consistency. While Squarespace doesn’t include every font you might want, you can still use your custom font with a bit of effort. Here’s how to do it!

Options for Using Your Custom Font

1. Skip your custom font: Opt for a similar font from Squarespace’s selection - but this can disrupt your branding consistency.

2. Create image graphics: Design text images with your font and upload them. This can be cumbersome and hard to update.

3. Upload your custom font: Add your font directly to Squarespace, making it easy to use and update across your site.

If you choose to add your custom font: let’s get started!

Before You Begin

• Coding required: This tutorial involves a bit of coding. Don’t worry—it’s mostly copy-pasting.

• Check font licensing: Ensure you have the correct license to use your font on a website. If in doubt, contact the font creator or check the licensing details.

This guide applies to Squarespace 7.0 and 7.1.

Step 1: Preparing Your Font Files

Your font likely comes in .TTF or .OTF format. That’s a great start, but to ensure compatibility across all browsers, you should also have .WOFF and .WOFF2 formats.

Convert Your Font Files

Use the Webfont Generator on FontSquirrel:

1. Upload your .TTF or .OTF file.

2. Download the generated .WOFF and .WOFF2 files.

Step 2: Upload Your Font

1. Go to the backend of your Squarespace site.

2. Navigate to Design > Custom CSS.

3. Scroll to the bottom and click Manage Custom Files.

4. Upload your .TTF/.OTF, .WOFF, and .WOFF2 files.

Step 3: Add Your Font in CSS

1. Copy and paste the following code into the Custom CSS box:

   css

   @font-face { font-family: 'your-font-name'; src: url('your-font-file.ttf'), url('your-font-file.woff'), url('your-font-file.woff2'); }

2. Replace your-font-name with the name of your font.

3. Update the file URLs:

   • Click Manage Custom Files.

   • Click each font file to get its URL.

   • Replace 'your-font-file.ttf', 'your-font-file.woff', and 'your-font-file.woff2' with the respective URLs.

4. Save your changes.

Step 4: Apply Your Font

To apply your custom font to headings or paragraphs, add the following code below the previous code in the Custom CSS box:

css

h1 { font-family: 'your-font-name'; }

Replace h1 with h2, h3, or p to apply the font to other elements, and replace your-font-name with your font's name.

Additional Customizations

You can also adjust other properties like font size and letter spacing:

css

h1 { font-family: 'your-font-name'; font-size: 24px; letter-spacing: 1px; }

Advanced: Using Custom Headings

If you want to create a new heading style (e.g., h4 for Squarespace 7.0 or h5 for Squarespace 7.1):

1. Add the following code:

   css

   h4 { font-family: 'your-font-name'; font-size: 20pt; letter-spacing: 1px; line-height: 140%; color: #3b3b3b; }

2. Use a Code Block to add your custom heading in your content:

   html

   <h4>Your custom heading text</h4>

You’ve successfully added your custom font to your Squarespace site without needing Typekit or other extras. Enjoy your beautifully branded website!