How to use custom fonts in your Squarespace site

Adding a custom font is a great way to spice up your website and make it more unique than the templates provided by squarespace. Normally when you want to change a font in squarespace you would do this in the style editor, but for custom fonts it will require a little bit a code. Don't be afraid, it's super simple with this step by step guide, plus we're going to provide the code for you here. All you have to do is copy and paste!

Step one — upload your font

First things first head over to the design tab and scroll to the bottom where it says "Custom css". Once you're in, you'll scroll down again and click on "Manage custom files", this is where you will upload your font. If you don't have a font you want to use yet, one of our favorite places to buy new fonts is creative market. If you're looking for free fonts, google fonts is a great place to start.

Step two — import the font into your website

@font-face {

Font-family: 'name';

Src: url('font url');

}

This is where custom css comes into play. The code above is what you'll need to copy and paste into the custom css area. Replace 'name' and 'font url' based on the font you've chosen. In order to get the url, you'll need to delete 'font url' and make sure your cursor is in the correct spot between the two parentheses. After that just click the font file you've uploaded and it will automatically paste the url wherever your cursor is flashing. When your done it should look something like this:

@font-face {

Font-family: 'hanley pro block';

Src:url('//static1.Squarespace.Com/static/5e73c10944bd0d55e95d74d7/t/5e73cd8cdca77767aa51ccdc/1584647568315/hanleypro-block.Otf');

}

Step three — change your heading & body copy

Now all that's left is to start using your custom font throughout your website. First determine what you want to change, it could be a heading, subheading, body copy, or any other text you want. In this example we will be changing the first heading (h1). If you're not familiar with css, the h1 heading is the largest heading and it descends from there to h2 and h3. The 'normal' text option is body copy and in css terms is called 'p' for paragraph.

The following code is what you will need to apply your font to one of your headings or body copy. You'll just need to replace 'name' with your font's name. It's important that that 'name' is exactly the same as the 'name' you gave it in the above code. If anything isn't working, always check your syntax first.

H1 {

Font-family: 'name';

}

And there you have it, a new font that will really customize your template and elevate your website!

If you're looking for fonts that are free for commercial use, check out this website!

If you're lost or need any help implementing changes on your squarespace site, make sure to get in touch with us!