In this post I shared some Squarespace font tips with you, and even showed you some of my favorite Squarespace font pairings for wedding photographers. But what do you do if your brand fonts aren’t in Squarespace, or you were already set on a font you’d love to use on your website and it’s not included in the font options?
You upload your own.
In this post I will walk you through the step by step process of uploading and using your own fonts in Squarespace.
Just a little disclaimer before we get started: before using this tutorial to upload your own font in Squarespace, make sure you have the right permissions to use the font on the Internet.
Alright, ready for it? Let’s do this!
Step 1: Uploading your font
The first step in this process is to upload your font to Squarespace. Go to your Design menu, then Custom CSS (don’t worry, CSS is not as scary as it sounds).
From there, scroll all the way to the bottom where it says Manage Custom Files, click on that, and then select Add images or fonts.
This is where you will add the font file for the custom font you’d like to use in your Squarespace site.
Using the upload file box, find the font on your computer and upload it to save it on Squarespace. Your font file should end in .ttf or .otf, either one will do for this!
Step 2: Add in code to set up the font
The next step allows Squarespace to understand what font we are talking about, which makes it possible to actually connect the font later.
Paste the following code in the CSS area:
@font-face {
font-family: ‘Font Name Here‘;
src: url(https://static1.squarespace.com/static/XXXXXXX),
}
The areas in bold need to be replaced with the specifics for the font you are trying to use.
The font name is simply what the font is called, like Times New Roman or Brandon. The source URL (src URL) can be found by deleting the https://static1.squarespace.com/static/XXXXXXX portion in bold and placing your cursor inside the parentheses. Then open the Manage Custom files section and click on the font you uploaded in step one. This should place a similar link to the one above inside the parenthesis.
Note: make sure you don’t delete any of the parentheses or apostrophes! Accidentally removing one of those could cause these instructions not to work for you.
Step 3: Connect the font itself
The final step is letting Squarespace know you’d like to use your uploaded font instead of one of the pre-installed Squarespace fonts.
Paste the following code on it’s own line below the } in the @font-face code:
h1 {
font-family:’Font Name Here‘;
font-size:55px;
color:#ffffff;
font-weight: 10;
}
All the text in bold can be changed to fit the look you need for your font. Here’s a brief explanation of what these mean, to make it easier for you to change them:
H1: Header 1, this can be replaced with a 2 or a 3 to fit the standard Squarespace header levels.
Font-family: this is where you’ll insert the font name you added in the @font-face code. Make sure that these match up, because this is the connection.
Font-size: pretty self explanatory, this is the size of your font. You can play around with different numbers here to see how they impact your chosen font.
Color: this is where you can change the HEX color of the font
Font-weight: similar to the weight number in the Site Style menu of Squarespace, this one let’s you tell Squarespace how heavy (or light) you want your font to be!
Step 4: The Final Result
The final result should look something like this:
@font-face {
font-family: ‘Font Name Here‘;
src: url(https://static1.squarespace.com/static/XXXXXXX),
}
h1 {
font-family:’Font Name Here‘;
font-size:55px;
color:#ffffff;
font-weight: 10;
}
If you’re trying to add in a different font for h2 and h3 as well, you would just keep that same pattern going, making sure to add the appropriate link, font name, and header name!
Whew! That was a lot. I promise it’s not as bad as it seems once you get into it. If you’ve got questions along the way, drop a comment down below!
In this post I walked you through the process for adding and using your own fonts in Squarespace using CSS.
If you’re looking to work with a web designer to create a stunning & strategic website for your business, look no further! I help creative entrepreneurs in the wedding industry create beautiful websites that help you stand out from your competition and communicate your value.
Sound good? Stop by the services page, and let’s get started!
* this is an affiliate link, which means I may get some benefit at no extra cost to you!
you may also like
