How to add your own fonts to Squarespace

Dreaming of adding a unique flair to your Squarespace site with a custom font? Let us show you how effortlessly!

Before we get started, here are a few things to keep in mind:

• This tutorial involves a bit of coding, but don't worry, we'll make it simple.

• Make sure you have the correct license for your font.

• And finally, this guide is tailored for Squarespace 7.0 and 7.1.

---

Step one:

Get your font files web-ready.

Your font should be in .TTF or .OTF format. If it is, awesome! That's pretty much all you need.

---

Step two

Download your font.

Ready for the next step? Navigate to your Squarespace dashboard and select "Design" > "Custom CSS". Scroll down to "Manage Custom Files".

Next, click on "Add Images or Fonts" and upload your three font files. Let's do this!

---

Step three

adding your font to the CSS.

So, you've finished uploading the fonts in the admin interface. Now, onto the coding part! Insert this snippet of magic into the custom CSS area to bring your fonts to life:

@font-face {

font-family: 'font-name';

src : url(fontURL.ttf/.otf);

}

Replace "font-name" with the name of your font. For instance, I might change mine to "Messapia". This will serve as a reference later on.

Now, let's update the font URLs. To adjust the "fontURL.ttf/.otf", you'll need to return to "Manage Custom Files", then select one of your font files. Upon clicking on the file, an URL is automatically pasted in the custom CSS area. Copy this complete URL and insert it into the appropriate area of the code, between parentheses.

Your code should resemble something like this:

Make sure to hit "Save" in the upper left corner to confirm the addition of your new font!

Important: you're not quite done yet! Read the next step to learn how to actually implement it on your site.

---

Step 4

incorporate it as your headline font.

So you've uploaded your new font to your site, but how do you actually use it?

You just need to add a bit of extra code to change the appearance of one of your existing headings with your new font. For example: H1, H2, H3, or a P (paragraph/body font).

It's easy, just copy and paste this code into the custom CSS area below the last code:

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

By pasting this code into your custom CSS, you'll change your Heading 1 (H1) to use your new custom font.

Make sure to replace "font-name" with the name of the font you added in the previous code.

You can also change "h1" to "h2", "h3", or "P" (for Heading 2, Heading 3, or paragraph/body text). It's as simple as that! See below for a list of all variants.

Congratulations! You've nailed it! You've successfully integrated your custom font into your Squarespace site.