Add Your Own Custom Fonts in Squarespace

Typography plays an important role in conveying your brand's personality and enhancing user experience. If you're using Squarespace for your website, you might find that the default font options don’t quite capture the essence of your brand.

Fortunately, Squarespace offers the flexibility to integrate custom fonts into your site, allowing for a more personalised and unique appearance. In this guide, you’ll learn how to add your own custom fonts in Squarespace, with step-by-step instructions to help you achieve the perfect look for your website.

---

Step 1 - How to Upload Your Custom Fonts in Squarespace

Get your font files on hand, these should be in .ttf, .otf, or .woff formats. Make sure that you have the appropriate usage rights for your fonts.

Next, navigate to your Squarespace dashboard and go to Website > Pages > (Scroll to the bottom of your pages) > Website Tools > Custom CSS. Then select ‘Manage Custom Files’. From there, upload your font file by dragging and dropping it into the designated area. Your font will then be successfully added to your Custom Files.

---

---

Step 2 - Add Your Fonts With CSS Code

With your font successfully uploaded to Squarespace, the next step is to specify where Squarespace should locate it and apply it to particular headings on your site. This involves a bit of CSS adjustment, but don’t worry—it’s quite manageable!

Start by creating a test page with sample text, including H1, H2, H3, and Body styles, so you can view changes in real time. Then, head to your Squarespace dashboard, navigate to Website > Pages > (scroll to the bottom) > Website Tools > Custom CSS, and paste the below code into the Custom CSS section. Note: Text in bold is where you need to customise the code - See the guide below.

---

CSS code (Copy this into your Custom CSS on Squarespace)

//Custom Fonts

@font-face {

    font-family: 'FontTitle';

       src: url('FontURL');

  }

h1 {font-family: 'FontTitle';}

---

Next, you'll need to adjust your CSS code to further style your custom fonts in Squarespace:

1. Replace FontTitle with the name of your font, such as poppins

2. Update the Font URL by clicking on Manage Custom Files and selecting your font file. This will automatically insert the URL into the Custom CSS box.

3. Modify H1,H2,H3,H4 OR P (for Body text) by changing FontTitle to the name of your font, poppins in this instance. You'll notice the text for each heading changes to your custom fonts as you update the CSS code. See the example code below.

Once you’ve applied your custom fonts in Squarespace, make sure to hit Save.

---

Example code

//Custom Fonts

@font-face {

    font-family: 'FontTitle';

       src: url('FontURL');

  }

h1 {font-family: 'FontTitle';}

h2 {font-family: 'FontTitle';}

h3 {font-family: 'FontTitle';}

p {font-family: 'FontTitle';}

---

Step 3 (Optional) Add More Styles To Your Custom Squarespace Font

Some font files may not support customisation through your basice Squarespace site Styles. To style your custom font, you'll need to modify your CSS code. Don’t worry—it’s easier than it sounds!

Use the CSS code below to adjust specific elements of your font type. Areas highlighted in bold are the parts you need to customize to suit your needs. Have a play around to get your custom font just right.

---

//Font Styling

h1 {

  font-family: 'fontTitle';

  font-weight: 700;

  font-style: italic;

  font-size: 16px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  line-height: 1em;

}

---

Customizing your website’s typography is a powerful way to make it stand out, and adding custom fonts in Squarespace is a straightforward process once you know how. By following the steps in my guide, you can easily incorporate fonts that align with your brand's identity and style. Whether you're aiming for a classic, modern, or edgy feel, custom fonts in Squarespace can elevate your site’s design and enhance its overall aesthetic. Give your website the distinctive touch it deserves!

---

You might also be interested in the article - how to create anchor links on Squarespace. Plus here’s some other CSS hacks for Squarespace websites.

---

Did I help you? Consider buying me a coffee as thanks!