Although Squarespace has a wide variety of stunning fonts to choose from. You might be wanting to upload a custom font in Squarespace that you’ve purchased or font on websites like Creative Market. The amazing thing is that you can use any font you desire for your brand.
Fonts play a vital part in telling your brand story. The one thing I’ve loved about switching from WordPress to Squarespace is the ability to use custom fonts and I’m going to show you exactly how you can do this by using a little bit of custom CSS.
CSS is nothing to be scared of, using code can truly help you customise your website as you want! The possibilities are endless…
How to upload a custom font to Squarespace
Uploading fonts to Squarespace has never been easier! Keep scrolling to find out how.
Step One: Upload your chosen font
Firstly, you want to ensure that you have your font files. You can download your fonts either from websites like Dafont, Google Fonts, Font Squirrel or paid websites like Creative Market. While you’re looking for the perfect font, make sure to view the usage rights to make sure that you are allowed to use this font on your website.
Next, you’ll need to upload this font file into Squarespace. Go to your Squarespace dashboard, Design > Custom CSS, scroll all the way to the bottom and click on ‘Manage Custom Files’. Here you can either upload or drag and drop your font. Your font file should come in either a .ttf, .otf or .woff format. You want to make sure you have the correct file before you add it to Squarespace. Just like that, your font is successfully uploaded to your Custom Files.
Step Two: Add Your custom font using CSS
At this point, you probably freaked out when you see the word CSS. But, honestly, it’s extremely simple and straightforward!
Add the below code in your CSS panel.
@font-face{ font-display:swap;
font-family: ‘FontTitle’;
src: url(‘FontURL’);
}
h1 {font-family: ‘FontTitle’;}
Now for the fun part, you can style your CSS! You want to make sure you add the following;
FontTile: This is where you want to add the name of your font.
FontURL: This is where you’ll add the URL link of the font you’ve just uploaded. Click on Manage Custom Files and then choose the font you want to add.
Customize which text: You can change h1 in the code to any text block if you want this font to take effect on your entire website you can add h1, h2, h3, h4, p. If you only want this font to take effect for your headings you’ll then only use your headings. This is a great way to allocate a different font to each text type.
Once you’ve added all the information you can go ahead and click ‘Save’ to apply your CSS.
You’ve now successfully uploaded your custom font! How easy right?! If you’re feeling even more daring and would like to add even more customisation I’ve added a code snippet you can use.
Advanced customisation
Looking to customise your font even further? Below are some codes you can add to totally style your text even further. Play around with it to achieve the look you want.
h2 {
font-family: ‘FontTitle’;
font-weight: 500;
}
font-style: italic;
font-size: 2em;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1em;
}
Let me know in the comments below if you found this post helpful. Squarespace makes it so much easier to upload custom fonts to your website!
