Learn How to Import Fonts into Squarespace

Yesterday I recommended 7 different font combinations for your Squarespace website. Today we’re going to talk about how to import your own fonts! This will be a tutorial, so if you don’t have a website on Squarespace this blog post probably isn’t for you. 

To add a custom font we’re going to need our fonts in one of the following files:

.ttf or .otf

.woff

.woff2

Usually when you purchase a font it will give it to you in at least one of these files, but just in case it didn’t, you can use this Web Font Generator which will help you get those files into the version we need.

After you have the fonts you want in the file type we need; we are ready to get into our Squarespace site. You’ll want to get into your site as if you’re editing it. You should have a list of options to your left such as: Pages, Design, Settings, etc. Select ‘Design’ then you’ll want to select ‘Custom CSS’ and at the bottom you should see ‘Manage Custom Files’.

Click ‘Add Images and Fonts’ and upload the fonts you’re wanting to use on your site. After your fonts are uploaded, you’re going to want to attach this code

@font-face {   

font-family: 'font-name';   

src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2);}

To get the code to work on the site you’ll need to customize it a little bit. Replace ‘font-name’ with the name of the font you’re trying to input. If your font name is ‘rubber-ducky’ you’ll want to replace it with exactly that. After that, the next step is changing the urls. You’ll want to highlight the text in the parentheses and replace it with the files you’ve uploaded. So for example, I would highlight URL.ttf/.of and then click ‘Manage Custom Files’ and select the font you want. 

Next we need to tell your site where these fonts should be applied. Are we wanting them as a header? Body text? Buttons?

As an example, if you’re wanting it as your second header for example, you’ll want to add this code

h1 {

font-family: 'font-name';}

Just like earlier, replace font-name with the name of the font you’re wanting to use.

Now if you’re wanting to edit the size, spacing, line height, color, and more you’ll just need to head over to your site styles! Coding can look intimidating, but simple things like this can really change the overall look and feel of your site. 

Cover photo shot by: Dorothy Louise Photography