Adding Custom Fonts in 7.0

While Squarespace has a whole heap of awesome fonts, it totally makes sense that you’d wanna add your own font to match your branding right? Or maybe you want more than 3 headings, or to add a cute script as a call to action or a quote! Well my friends, you don’t have to go adding in an image of your font, or try and match it best you can. We can add a simple piece of code to allow you to upload your fave fonts easily into Squarespace!

Omg Code?! I’m Scared!

Don’t worry guys, I’m very new to code myself and still get scared! But this is just a simple copy and paste job - so don’t fret! Before we get started, if you’ve purchased a cute font from Creative Market for example, make sure you’ve purchased the one with the web license!

Step 1. What font files do you need?

A whole bunch! But that’s fine, your font will probably have all these ready to go. Most fonts come in either .TTF or .OTF format. There’s one more format you’ll need just to make sure all browsers people are using are covered .WOFF and .WOFF2. If you’re lucky the cute font you downloaded from Creative Market (like the one I use) already came in all these formats - Woohoo! If not - don’t stress! You can convert your fonts over here at Font Squirrel and it will give you all the formats you need!

Step 2. Let’s Upload!

In the backend of your Squarespace website we can upload our fonts. You wanna go to Design > Custom CSS and at the bottom you’ll see this little guy bellow. Click on Manage Custom Files and you’ll see Add Images or Fonts and just add your 3 font format types right here.

Step.3 Time For Some Code

So to actually use these fonts we need to add in some code. Click back into the Custom CSS Box and add in this little snippet here:

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

Where it says 'font-name'; you’ll just add your fonts name instead.
Eg - My fonts name is Quincy so my code looks like this
font-family: 'QuincyCF-ExtraBold';

Cool! Now the next bit is the tiny tricky bit. We need to change the URL’s. So to do this, click on Manage Custom Files , and then click on one of your font files. When you click on the file you’ll see a URL instantly pasted within the Custom CSS box.  Paste this complete URL into the corresponding spot in the code just like this. Sweet! Go ahead and click save.

Step 4. Using The Font!

Ok, so how do you actually use this font? Nope..it doesn’t just show up in your Squarespace fonts ( I wish! ) We just need to add ONE more little bit of code!

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

Yep! Just change ‘font-name’ to your fonts name again. See where it says h1? That means it’s changing your current Heading 1 to this font! So yeah, you can go ahead and change h1, h2, h3 or P (paragraph) to all new fonts if you like!

What if you want an h4, h5, h6?

Can do! Even though Squarespace doesn’t actually have an h4 you can just replace the h1 in the code with h4.

BUT it won’t just show up in your text box so you will have to add one MORE bit of code to do this. So wherever you want this new h4 font, instead of clicking Text Block you want to add a Code Block.

<h4>
Hey guys it's my new font!
</h4>

To make style changes you can do that in the CSS code block as well using this

h4 {
  font-family: 'font-name';
   font-weight: 400;
   font-style: normal;
   font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: none;
   line-height: 0.9em;
   colour: #f6cab6;
   margin-top:6px;
   margin-bottom:1px;
}

Just play around with it until you’re happy!

And that’s it! Not TOO hard huh? Once you’ve added one, you’ll be hooked and adding fonts all day long! Enjoy! x