Adding Custom Fonts To Your Squarespace Website

Adding Custom Fonts To Your Squarespace Website

So, you’ve decided to use a font that you downloaded from the Internet but don’t know how to install it on your Squarespace website? There is a simple solution — upload this font on the website and connect it using CSS. This is an easy way to add your custom fonts and the whole process won’t take longer than 10 minutes. Let’s begin!

 
Pinterest cover.png
 

Wait, where to find and download custom fonts?

In case if you don’t know what font pair you want to use on the website here is one service, that I always use to find unique fonts or design materials for my projects: Creative Market — this is a marketplace, where designers from all over the globe sell their custom designed fonts (and not just fonts). Try to find something that fits your design needs. Prices range from $10-$30.

So you’ve bought and downloaded the font. Now you should have .TTF or .OTP files.


Let’s upload our font on the website!

STEP 1

There is a secret button that you can find by going to Squarespace Admin Panel → Custom CSS → Click on the “Open in New Window” button → Manage Custom Files.

How to find Manage Custom Files.gif
 



STEP 2

Click on the empty space on the right side and choose the font file that you’ve prepared earlier. Wait a few seconds until the font is completely loaded. Done? Go to step 3. 

uploaded font.jpeg
 

STEP 3

Now we need to select and copy a unique URL of the recently uploaded font. To do that just click on the font name in the right window. 

How to select font URL.gif
 

STEP 4

Copy this address, we’ll need it. Let’s modify the code snippet that I’ve prepared specially for you.

@font-face  {    
  font-family: 'TYPE IN THE FONT NAME HERE';   
  src: url('INSERT HERE YOUR FONT URL'); 
}

Live Example

For example, I’ll upload a font that I bought some time ago. Name of the font is ‘Madina Script’. Following my instruction, I’ve uploaded it using “Manage custom files” panel and I got unique URL. Then I modified code snippet above and now I have something like that:

@font-face  {   
  font-family: 'Madina Script';  
  src:url('//static1.squarespace.com/static/5ba85c22ab1a6268f9e68863/t/ 5c45c61fb8a04573760ddb68/1548076582136/Madina+Script.otf'); 
}


Quick tip

Please, pay attention that I’ve removed ‘https’ piece. It’s always the best practice to use URL address without HTTP or HTTPS part because your website could be opened using both variants of connections, just remove it and the browser automatically will choose the best option.

Now I can use my font anywhere in CSS code and style any text block on my website.

p { 
    font-family: 'Madina Script'; 
    font-size: 30px; 
}

That’s it! You also could style p, h1, h2, h3 text block.

Doesn’t work?

If something doesn’t work try to declare new CSS rule as !important so it will look like this:

p { 
    font-family: 'Madina Script' !important;
    font-size: 30px;
}

Do you still have some questions? Feel free to contact me over the contact form on the website — click on me.