This tutorial will show you how to add custom fonts on Squarespace. Adding custom fonts is another way of implementing new creative elements to the design of your site away from the custom Squarespace template provided.

Complexity: Easy

Step 1

Start by copying and pasting the code below into your Custom CSS. This can be found under Design > Custom CSS

Step 2

At the bottom of the CSS window, there is the ‘Manage Custom Files’ button, click this and upload your font file.

Step 3

Within the first set of quotation marks (after “font-family:”) enter the name or your font. For this example, font-family will be ‘AGRANDIR‘.

Next, click between the second set of quotation marks with “Font_URL“, delete the Font_URL, and then click on the file you uploaded as you should have something like what is shown below.

Step 4

With your font ready, you can now assign it to specific text classes to be able to view them on your website.

In this example, you will replace ‘FONT-NAME’ with ‘AGRANDIR‘.

Step 5

Repeat steps 1 and 2 to add more custom fonts. Please note for SEO efficiency, it is better to have a maximum of 2 custom fonts.

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.