How to add custom fonts to your Squarespace website
This tutorial will show you how to add custom fonts to your Squarespace website. I have recorded a short video to show you the steps and written out the code and steps below. This covers the basics of uploading custom heading and paragraph fonts, please refer to the blog post listed at the end of this tutorial for more advanced custom font settings.
Step 1. Add your custom fonts to the CSS editor.
Go to Design > Custom CSS and click the button "Manage custom files". Then click "Add images or fonts" to upload your custom font.
*If you're using adobe fonts then please follow their instructions to add your stylesheet code instead.
Step 2. Add the first part of the code to the CSS panel.
font-family: 'font name goes here';
src: url('font url goes here');
}
What it means:
font-family - this is the name that you are going to give the font, make sure to use the same spelling in the second part of the code.
src: url - To get the font url, click on font file that you uploading in the previous slide, this will show you the URL.
Step 3. Add the second part of the code to the CSS panel.
For headings:
font-family: 'font name goes here';
font-style: normal;
}
For body copy/ paragraph text
font-family: 'font name goes here';
font-style: normal;
}
For Buttons
font-family: 'font name goes here';
font-style: normal;
}
And you’re done! Your new fonts should be showing on your website.
Want to make only one word stand out?
Head over to my blog post “How to make one word a custom font on your Squarespace website” for a more advanced CSS tutorial.
Hi I’m Danielle
I help entrepreneurs & creatives to bring their brand online through beautiful, strategic web design. Click below to learn more about how I can help you to launch your dream website.
