How to Add Your Own Custom Font to Squarespace
Squarespace offers a wide selection of fonts that you can use for your website right away. However, if you have specific brand fonts or prefer a typeface that is not available on Squarespace, you can easily install a custom font. The nice thing? It’s not hard!
Upload Your Custom Font
Start by locating the font file on your computer. It should have a .ttf, .otf, or .woff extension.
1) From your Squarespace menu, go to Design > Custom CSS
2) Scroll down to the
Manage Custom Files button.
3) Click Add Images or Fonts, then select your font file from the window that pops up.
4) Now copy and paste the following CSS code into the "Custom CSS" area:
@font-face {font-family: YOURFONT;src: url();}
5) Replace where it says YOURFONT with the name of your custom font - you can even make it up if you’d like, just make sure to remember the spelling for later.
6) Insert the URL of your font between the brackets ( ) in the src field.
To do this, click on the space between the brackets, then select your uploaded font from the Manage Custom Files menu. The URL will be automatically added.
Should look something like this!
@font-face {font-family: 'Nexa Bold';src: url('https://static1.squarespace.com/static/62e8ae836bc4ae2b53ae8e79/t/62e8b6530a2514617d8923e1/1659418195678/Nexa+Bold.otf');}
Apply Your Custom Font
Getting close! Now we need to choose where on your Squarespace site you’d like your custom font to appear!
One of the advantages of Squarespace 7.1 is the larger number of font options available. To use a custom font, select the headings or paragraphs you want to apply it to and use the appropriate CSS snippets. In Squarespace 7.1, you have seven options to choose from:
Heading One h1
Heading Two h2
Heading Three h3
Heading Four h4
Paragraph One .sqsrte-large
Paragraph Two p
Paragraph Three .sqsrte-small
Copy and paste the appropriate CSS snippets for the Headings/Paragraphs you want to switch to your custom font. Replace YOURFONT with the name of your font (make sure the spelling matches what you entered earlier!).
h1 {font-family: 'YOURFONT';}h2 {font-family: 'YOURFONT'; }h3 {font-family: 'YOURFONT';}h4 {font-family: 'YOURFONT';}.sqsrte-large {font-family: 'YOURFONT';}p {font-family: 'YOURFONT';}.sqsrte-small {font-family: 'YOURFONT';}
Apply Your Custom Font Elsewhere on Squarespace
Keep in mind, the code above will work for Headings and Paragraphs, but there are other places where you might want to use a custom font that won’t be be covered by the above code, like Button Blocks or Newsletter Blocks, for example.
I’ve compiled a bunch of handy code snippets below for other areas to show off your custom font in Squarespace!
How To Change The Font Of Your Site Header On Squarespace
The site header is the navigation area that appears at the top of your Squarespace website. It could include various links, your site title - even an announcement bar that appears above it. You can customize the font for all of these elements using the following CSS code.
// Site Title //.header-title-text a {font-family: YOURFONT !important;}// Site Navigation //.header-nav-item a {font-family: YOURFONT !important;}// Button //.header-actions-action .btn {font-family: YOURFONT !important;}// Announcement Bar //.sqs-announcement-bar-url a {font-family: YOURFONT !important;}
Replace YOURFONT with the name of your custom font.
How To Change The Font Of Buttons On Squarespace
Squarespace offers several different button sizes - Primary, Secondary, and Tertiary (or Small, Medium, and Large, depending on if you’re using Squarespace’s new Fluid Engine editor or the Classic Editor). You can use the following CSS code to change the font for each of these button sizes.
// Primary or Medium Button //.sqs-block-button-element--medium, .sqs-button-element--primary {font-family: YOURFONT !important;}// Secondary or Large Button //.sqs-block-button-element--large, .sqs-button-element--secondary {font-family: YOURFONT !important;} // Tertiary or Small Button // .sqs-block-button-element--small, .sqs-button-element--tertiary { font-family: YOURFONT !important; }
Replace YOURFONT with the name of your custom font.
How To Change The Fonts in Blog Posts On Squarespace
If you have a blog on Squarespace, you will need to apply your custom font to several different elements manually. These include the blog page titles and descriptions, as well as the post titles on individual article pages.
// Blog Page Post Title // .blog-title { font-family: YOURFONT !important; } // Blog Page Post Descriptions // .blog-excerpt p { font-family: YOURFONT !important; } // Blog Page Read More Link // .blog-more-link { font-family: YOURFONT !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURFONT !important; }
Replace YOURFONT with the name of your custom font.
How To Change The Font Of Newsletter Blocks On Squarespace
// Newsletter Form Title // .newsletter-form-header-title { font-family: YOURFONT !important; } // Newsletter Form Description // .newsletter-form-header-description p { font-family: YOURFONT !important; } // Newsletter Form Fields // .newsletter-form-field-element { font-family: YOURFONT !important; } // Newsletter Form Button // .newsletter-form-button { font-family: YOURFONT !important; } // Newsletter Form Footnote // .newsletter-form-footnote { font-family: YOURFONT !important; }
Replace YOURFONT with the name of your custom font.
How To Change The Fonts in Quote Blocks On Squarespace
The Quote Block is a useful feature that allows you to highlight specific quotes or phrases on your website. They’re great for things like testimonials, especially with your big, beautiful, new custom font.
// Quote Text // .sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source // .sqs-block-quote .source { font-family: YOURNAME !important; }
Replace YOURFONT with the name of your custom font.
How To Change The Fonts in Form Blocks On Squarespace
The Form Block is what people use to get in touch with you. This helps you generate leads, and allows clients and customers to reach out and experience your incredible customer service.
// Form Title // .form-wrapper .field-list .title { font-family: 'YOURFONT'; } // Form Caption //.form-wrapper .field-list .field .caption { font-family: 'YOURFONT'; } // Form Description // .form-wrapper .field-list .description { font-family: 'YOURFONT'; } // Form Field Element // .form-wrapper .field-list .field .field-element { font-family: 'YOURFONT'; }
That’s it! Hopefully this makes customizing your site all the easier!
Remember, if you’d love a next-level site, but would rather not do this all yourself, don’t hesitate to reach out!
Was this post helpful? Consider buying me a coffee to say thanks!