How to add a custom font to your Squarespace website

 How to add a custom font to your Squarespace website

*If you want to follow along in a video, scroll to the bottom of the post :)*

To add a custom font to your Squarespace website, you need to go to Design > Custom CSS.
At the bottom, you will see a button saying Manage custom files like the one in the image below.

 How to add a custom font to your Squarespace website

Click on it, then click on the arrow like the one in the image below.

 How to add a custom font to your Squarespace website

Select the font file you want to upload. Once it is uploaded, you will see it appear. Click on the file. The link to the font will show in the Custom CSS area above. Copy this link somewhere on your desktop and delete it from the Custom CSS area.

Copy the code below and change the name and link to the font you want to add

@font-face {
    font-family: 'NAME OF YOUR FONT';
    src: url('LINK TO YOUR FONT');
  }

Now depending on which header you want to target with this new font, you add the code below as well.

h1 {
font-family: 'name of your font the exact same way you wrote it down above';
}

I want to add a new header to my website

If you want to add it in addition to the fonts you already have, you can create a new header and change the different options like the font-size which can vary just remember to add px after your preferred number and font-weight can be bold, regular or extra-bold.

h4 {
font-family: 'name of your font the exact same way you wrote it down above';
font-size:14px;
font-weight: bold;
}

Once you added this to the custom css area, go the page you want to edit and select the Markdown block

<h4>
  Hello
</h4>

Copy and paste this code into your markdown block and you can edit the text between the h4 signs. If you added an h5 and h6 then you should change your markdown accordingly.

That's it! You added a custom font to your website :)

 

Related Posts