How to Download and Add a Custom Font in Squarespace

Finding the perfect font can elevate your website's design, but what happens when you can't find the right one on Squarespace? Don't worry, adding a custom font to your Squarespace site is simpler than you might think. In this guide, we'll walk you through the steps to download your desired font and integrate it into your website seamlessly.

Watch the VIdeo

Check out the YouTube video below 👇

#1 Identifying Your Desired Font

While browsing the internet, you've likely come across a font that catches your eye and thought, "That's the perfect font for my website!" To identify and download this font, you can use a handy browser extension called "WhatFont." This tool allows you to hover over any text on a website and immediately see what font is being used. For this example, let's say the font is "SF Pro Display."

#2 Downloading the Font

Once you've identified the font you want to use, the next step is to download it. Search for the "SF Pro Display" font online and find a reputable source to download it from. Ensure you're downloading from a legitimate site to avoid any potential security risks.

#3 Adding the Font to Squarespace

After downloading the font, it's time to integrate it into your Squarespace site. This involves a bit of coding, but don't worry, we'll guide you through each step:

1. Accessing Custom CSS: Log into your Squarespace account, navigate to the Custom CSS section by hitting the slash key (/) and typing in custom css.

2. Uploading the Font: Before adding the CSS code, you need to upload the font file to Squarespace. You can do this by adding your custom font as a file in the "Manage Custom Files" section within the Custom CSS editor.

3. Writing the CSS Code: With the font uploaded, you'll reference it in your CSS code to apply it to your website. Here's a basic template you can modify:

@font-face {font-family: 'FONTNAME'; src: url(); } h1 { font-family: 'font-name'; font-size: 20pt; letter-spacing: 1px; line-height: 140%; }

Replace `'YourFontName'` with the name of your font. Also make sure to place the actual URL to the uploaded font file in your Squarespace site. You can do this by clicking in between the parentheses after ‘url’ and simply click on the font under custom files

#4 Customizing Font Properties

Now that your font is added, you might want to customize its appearance further. You can adjust properties like font size, letter spacing, and line height to get the exact look you want. Here are some examples of CSS properties you can tweak:

-Font Family: Retype the same font family as the one used in the code above.

- Font Size: `font-size: 20px;` (Change `20px` to your desired size)

- Letter Spacing: `letter-spacing: 5px;` (Adjust the spacing between letters)

- Line Height:  `line-height: 1.5;` (Alter the spacing between lines of text)

Experiment with these settings to achieve the perfect typography for your website.

#5 How to change between headings and paragraph texts

You can edit the selector (in this case our header and paragraph fonts) to your liking by changing it accordingly:

Customizing your Squarespace website with a unique font can significantly impact your site's look and feel. By following these steps, you can easily download and add any font to your website, ensuring it stands out and reflects your brand's style. Remember, playing around with CSS properties allows you to fine-tune the appearance of your font, making your website truly yours.

Your Designer

I’m Wesley, a Squarespace website designer. I’ve created amazing websites for multiple clients across different industries from Education sites to Wellness brands to Accounting Firms. If you’re looking for a website and want to discuss a potential project, email me at wesley@websleydesign.com. You can also schedule a free 15-minute consultation call