How To Use Your Custom Fonts Anywhere On Your Squarespace Site. A Five Step Process!

 Learn how to use your custom fonts anywhere on your squarespace site in five steps.

A perceived Squarespace drawback is the notion that you can’t use custom fonts, but that couldn’t be farther from the truth! I am here to prove that theory wrong once in for all.


One of the great things about Squarespace is that it’s so user-friendly while having an out of the box clean and modern feel.  Although there is a degree of customization you can achieve with the Style editor, there are just some things you can’t do. This is where custom CSS and the markdown block come into play.


#1:

The first step to adding your custom font to Squarespace is picking your custom font. If you have it already then awesome, but for those who haven’t finished the brand identity portion of you’re branding then you might want to check out:

 

·      DaFont

·      Google Fonts

·      Creative Market

 

All of these platforms have beautiful + free fonts to choose from. Creative Market is the only one that usually charges but if you get on their email list they send out free fonts once in a while. Or if you don’t mind spending a few bucks on fonts then it’s worth it.

 

#2


Once you have the font downloaded on your computer you will need either the .ttf or .otf file.


Now head over to Design ==> Custom CSS ==> Open In New Window ==> Manage Custom Files


Once you click the “Manage Custom Files” you will see this:

 
 Manage Custom Files on CSS Editor
 

This is where you are going to click on “Add Images or Fonts” and upload either your .ttf or .otf file. You can see on the picture above how my Perfect Sunset font has been uploaded

 

#3:


Now that you’ve chosen your custom font and uploaded you can go ahead and copy the following on your Custom CSS Editor.  Make sure to replace the “YOUR FONT NAME” with your actual font name before pasting.


@font-face { font-family: “YOUR FONT NAME”; src:url(“


Once you’ve pasted this you are going to leave your cursor right at the end of the code you just pasted and then click on the font you uploaded in step #2. By clicking on the font you will be automatically pasting the URL of your custom font.

 

Now that the url is pasted paste this to the end of your code:


”); }


You should now have something similar to this with your font name and url :

 

 
 How to use your custom fonts anywhere on your Squarespace site. Here is an ex of the Font name URL on the CSS Editor on the backend of Squarespace.
 

#4

 

Ok, so I promise we are almost done so just hold on tight.


Since we want to use this code anywhere on our website we are going to make this font either h1, h2, h3, or make our own h4.


If you make your custom font either h1, h2, or h3 you will be able to add it to any of your normal text blocks.


I chose to create an h4 because I was already using fonts for my h1, h2, and h3 and only wanted to use my custom font on certain parts of my site. 


Regardless of whether you want to use it as h1, h2, h3, or h4 paste the following code on your custom CSS Editor and replace the # with 1, 2, 3, or 4:

h#,

.page-description{

    font-family: ‘PerfectSunset’;

}

 Your custom CSS editor should now look like this:

 

 How to use your custom fonts anywhere on your Squarespace site. 

Once you’ve done this click save.


#5


If you chose to go the h4 route or simply want to customize the size or color of your h1, h2, or h3 fonts without affecting all of the text on your website then you’re going to love this last step!


Side note: The reason I say this is if you choose to make your custom font h1, h2, or h3 you can change the color and size through your style editor but that will change all the text on your website that uses h1, h2, or h3. Sometimes you just want to change the size and/or color in one particular area so the Markdown block is perfect for this.

 

The Markdown block lets you customize fonts using markdown language so it’s perfect for when you want an added touch to your fonts.


Create a Markdown block to your page and paste the following:


<h# style="display:inline;color:#a37b74;font-size:6em">YOUR TEXT</h#>

 

Make sure to replace the # with what you chose to make your custom font so h1, h2, h3, or h4. Also, replace the color with your custom hex code and adjust the font size to what you want.

 

Bonuses:

  •  If you want to center your text add <center> to the beginning and  <center>  at the end
  • If you want to display two different types of texts on the same sentence use the following code and replace the h tags with the heading you want to use so h1, h2, h3, or h4. 

 

<h1 style="display:inline;">YOUR TEXT</h1> <h2 style="display:inline;">YOUR TEXT</h2>

 

Now you can use your beautiful custom fonts however you please! I hope this helped you and if so let me know in the comments below. Also, if you have any questions feel free to comment below or shoot me an email at hello@jnlmediaco.com.

Posts you might want to check out: