Typography is such an important part of your Squarespace website design. Your fonts are the way that people visually take in your content, and can often portray your tone of voice, so you’ve got to choose carefully!
Luckily Squarespace has over 1600 built-in fonts for you to choose from for your site, from modern sans-serifs to elegant script fonts, you really are spoilt for choice.
But what if your font isn’t available in the Squarespace font library? You’ve spent all this money on getting your branding done, and now you can’t even use the fonts your designer picked out for you.
If your brand font isn’t listed in Squarespace’s font library then don’t panic, there is a way for you to add in your own custom fonts, AND it’s super easy for you to do. All it takes is a little bit of CSS, which I’m going to walk you through how to use now.
Step 1: Upload your custom font to Squarespace
First things first, you need to make sure that you have your font downloaded so that you can upload it into Squarespace’s custom file library. If you don’t have your font downloaded, you can purchase it online, from a font library like myfonts.com, creativemarket.com, fontsquirrel.com, to name a few. If you can’t find it on those platforms, just give it a good old fashioned Google.
Note: You’ll need to have the file downloaded in a .tff, .otf or .woff format.
Once you’ve downloaded your font, you need to go to Design > Custom CSS and scroll down to the bottom to ‘Manage Custom Files.’ Now you simply need to upload your font by either dragging and dropping it in, or selecting the font file from your computer.
1) Click manage custom files
2) Click add images or fonts
3) Now your font is uploaded!
And now your custom font has been uploaded Squarespace! First step, completed!
Step 2: Use CSS to change your font styles
Now we need to get a little technical (only a little I promise!) and add in some code to let Squarespace know where we want our custom fonts to appear.
We’re going to be using CSS to direct Squarespace to your fonts.
Note: We recommend making a ’style sheet’ page where you create a blank page and adding in one of each text stye, .i.e. H1, H2, H3, H4 and the paragraph styles, so you can see all your new font styles in action.
Go to Design > Custom CSS
/*adding in custom font*/
@font-face {
font-family: 'FontName’;
src: url('URL');
}
/*end of adding in custom font*/
Copy and paste the above code into your CSS box. We now need to change two things in this code:
Change where it says ‘FontName’ to the name of your font. So let’s say your font is called Proxima Nova, your line of code would read: font-family: ‘ProximaNova’;
Now we need to add in the font URL where it says ‘URL’. To do this, you need to click on Manage Custom Files (where you uploaded the font earlier) and then click on the font file. This will then paste the URL into the Custom CSS box wherever the cursor was before.
We now need to tell Squarespace that we want our H1 to be Proxima nova, so we need to add in this code:
h1 {
font-family: 'FontName’;
}
/*We would change this to:*/
h1 {
font-family: 'ProximaNova’;
}
Note: it doesn't matter what you name the font, as long as it perfectly matches what you've put as the font-family name in the adding in custom font CSS.
And then we’d do the same for all the other font styles we’d like to change to Proxima Nova, i.e.
/*editting the specific font styles*/
h1 {
font-family: ‘ProximaNova’;
}
h2 {
font-family: ‘ProximaNova’;
}
h3 {
font-family: ‘ProximaNova’;
}
h4 {
font-family: ‘ProximaNova’;
}
p {
font-family: ‘ProximaNova’;
}
/*end of editting the specific font styles*/
Note: make sure you don’t delete the semicolon at the end of the code, your CSS needs that there!
Once you’ve made all your changes, hit save and now all your fonts will be Proxima Nova.
If you need to add in another custom font, simply repeat the earlier steps, i.e. if you want the body copy to be Open Sans, you would add this section in again, but with the name and URL changed for Open Sans.
/*adding in custom font*/
@font-face {
font-family: 'FontName’;
src: url('URL');
}
/*end of adding in custom font*/
What about Adobe Typekit fonts? Does Squarespace support Adobe Typekit fonts?
If you’re wanting to use Adobe Fonts in your Squarespace 7.1 site then you just need to nab some code from your Adobe Typekit.
Go to your TypeKit, choose your font and click the </> symbol in the bottom right of the box.
This then brings up the different weights of fonts available, select the one/s that are relevant to your site, and then click the plus button to add it to a web project.
Once you’ve done this, Adobe gives you a style sheet link and some CSS.
Copy and paste this section:
<link rel="stylesheet" href="https://use.typekit.net/YOURCUSTOMTYPEKIT.css">
And go to Settings > Advanced > Code Injection > Header, and paste the above code in there.
Now add in some custom CSS in Design > Custom CSS to define which style you’d like in this new font, i.e:
h1 {
font-family: ‘Poppins’;
font-weight:400;
font-style:normal;
}
And there you have it! How to add custom fonts to your Squarespace 7.1 website.
