Easy customisation options to align your website with your branding

You’re a small business owner, with a Squarespace website and you want to know alllll the tea on how to make it look 🤌🏽🤌🏽🤌🏽 without the designer price. Welcome to The Squarespace Series: your ultimate guide to designing like a pro and creating a website that turns heads (and maybe a little envy too). In this first episode we are exploring how to add custom fonts to your website. Let’s go!

---

How to add custom fonts to your Squarespace website

While Squarespace offers a variety of font options, it doesn’t give us the option to upload your font files. With a little bit of Custom CSS you can do exactly that!

Here’s what we are going to cover:

• Prepare your custom font.

• Upload your fonts Squarespace.

• Add CSS to apply your custom font.

• Style your custom fonts.

• Save and preview your changes.

• BONUS styling: Buttons, navigation and more

---

Step 01: Prepare your custom fonts

Before you can add a custom font in Squarespace, you need to have the font file in one of the following formats: OTF, TTF, or WOFF.

Step 02: Upload your fonts to Squarespace

To upload font to Squarespace, log in to your account and click on Website from the left menu. Then head to Pages, scroll down to Website Tools > Custom CSS.

Click the drop-down arrow beside the Custom Files menu, select Add Images or Fonts, and locate your custom font file from your computer.

Click on the font file once uploaded to generate a URL and it all automatically paste into your Custom CSS area. Keep this URL, as you’ll need it in the next step.

Repeat this step if you want to add multiple custom fonts.

Step 03: Add CSS to apply your custom font

Okay, you’re doing great! You have the file, now with some code we are going to tell Squarespace we will be using it. In your custom CSS panel, you need to add the following lines of codes below. Give your font a name and add the font URL inside the brackets.

Repeat this step if you want to add multiple custom fonts.

@font-face {
font-family: 'GIVE YOUR FONT A NAME';
src: url(ADD THE URL HERE);
}

Copy to clipboard

Step 04: Style your custom fonts

Now let’s target all the font styles available on Squarespace, copy the code below and add the font-family name and font size in between the : and ;

h1 {
  font-family:;
  font-size:;
    }

h2 {
  font-family:;
  font-size:;
}

h3 {
  font-family:;
  font-size:;
}

h4 {
  font-family:;
  font-size:;
}

.sqsrte-large {
  font-family:;
  font-size:;
}

p {
  font-family:;
  font-size:;
}

.sqsrte-small {
  font-family:;
  font-size:;
}

Copy to clipboard

Now, if you’re changing the font size, this will apply on all device sizes, so here’s the code you need to change the font size for mobile devices. Below we are using a media query to target the code to only apply if the device size is smaller then 767px.

@media screen and (max-width: 767px) {
h1 {
  font-size:;
    }

h2 {
  font-size:;
}

h3 {
  font-size:;
}

h4 {
  font-size:;
}

.sqsrte-large {
  font-size:;
}

p {
  font-size:;
}

.sqsrte-small {
  font-family:;
  font-size:;
}
}

Copy to clipboard

Step 5: Save and preview your changes

Make sure to save your changes in the CSS editor. Give yourself a pat on the back cuz that was amazing. You can preview your work clicking the ↗ to view your website.

BONUS styling: Buttons

Style your Squarespace buttons with the following code. Add your font family name and font size in px.

//Buttons//
#siteWrapper.site-wrapper .sqs-button-element--primary {
  font-family: ;
  font-size: ;
}

#siteWrapper.site-wrapper .sqs-button-element--secondary {
  font-family: ;
  font-size: ;
}

#siteWrapper.site-wrapper .sqs-button-element--tertiary {
  font-family: ;
  font-size: ;
}

Copy to clipboard

BONUS styling: Navigation

Here’s the code to style your header navigation. Add your font family name and font size in px.

// Site Navigation //
.header-nav-item a {
  font-family: ;
  font-size: ;
}

Copy to clipboard

BONUS styling: Scrolling text

How can we forget about the humble scrolling text, here’s the code you need to style it.

//Scrolling Text
div.marquee-block * {
  font-family: 'YOUR FONT FAMILY' !important;  
}

---

Looking for more free tools for your Squarespace website? Check out our Plugin Freebies

Plug + play style digital goods to level up your Squarespace website.

Enjoy & happy coding!