How to add a custom font to your squarespace website
Do you have a special brand font, or just don’t really love any of the hundreds of fonts that are in Squarespace? You’re picky, we respect that. I am here to show you how to upload your font into your squarespace site.
Pick out your perfect font, and make sure to grab the web license. I love searching Creative Market for fonts!
Once you have purchased your font and downloaded it, it’s time to move into squarespace.
3. In Squarespace, Go to Website > Website Tools > Custom CSS
4. Click Custom Files + Then drag your font to the box
5. Then paste the code below in your CSS:
@font-face {
font-family: 'FontTitle';
src: url('FontURL');
}
6. Change the font title to your font name
7. Delete the ‘Font URL’ and then keeping your cursor there click on custom files and insert your font here.
8. Now you will want to tell your website which places you want this font to appear using the following CSS identifiers:
‘font selector’ {
font-family: ‘Font Title’ !important;
}
Use the following in bold to replace the ‘font selector’:
Heading 1 - h1
Heading 2 - h2
Heading 3 - h3
Heading 4 - h4
Paragraph 1 - .sqsrte-large
Paragraph 2 - p
Paragraph 3 - sqsrte-small
There are several other selectors that you may need to make your font appear in certain areas of your site, if you have any additional questions feel free to reach out to us at erin@turnercreativeco.com.
Get Creative,
Erin