Squarespace is pretty good with font options that you can use on your website. However, if you’re looking for a particular custom font that is either part of your branding or in order to get a specific effect, chances are – you won’t find it inside your Site Style options. Adding a custom font to your Squarespace website is a great way to set your brand up for success. Follow those steps below to add your custom fonts to your website.

Step 1: Download your required font file to your computer.

Already have your custom font files? Great! If not, head on over to DaFont, Google Fonts that offer free fonts, and Creative Market for beautiful custom fonts you can purchase at a price of $20-$30. or FontSquirrel and pick out a font that compliments your brand.

Step 2: Upload your chosen font to Squarespace.

Go to your Squarespace dashboard, click Design > Custom CSS, scroll all the way to the bottom, and click on “Manage Custom Files” then click “Add images of Fonts”. Upload or simply drag and drop your font file. It should come in either a .ttf, .otf, or .woff format – so make sure you have the correct file at this point. Once you do that, your font is successfully uploaded to your Custom Files.

Step 3: Add your font to custom CSS code.

First, we recommend you to create a test page to style your text on it, and assign H1, H2, H3, and Body stylings to it, so you can see the changes in real-time. Then, go to your Squarespace dashboard, Design > Custom CSS  and copy and paste the following snippet of code inside the Custom CSS box. If you already have some code here, just paste it all the way at the bottom.

@font-face {
    font-family: FontName;
    src: url(FontFile.woff);
}

Change the FontName in the code to the name of your font (i.e. mine would be TiffanyScript). Add the source URL where your font is being stored. To do that click right between the parentheses after “src: url.” Then click on manage custom files again and, finally, click on the font you just uploaded. The URL will automatically be added to the CSS. The final result should look something like this:

@font-face {
font-family: “Catamaran Thin”;
src: url(https://static1.squarespace.com/static/5f7f2b9b10162e3e10e5e5d0/t/5fb96a06c5d58d0b1fc50fe1/1605986822663/Catamaran-VariableFont_wght.ttf);
}

 


Now we’re going to target the elements you want to change. Heading 1 = h1, Heading 2 = h2, Heading 3 = h3, body text = p. Copy and paste the code below (be sure to change the fontFamily name) using only the elements you want to change.

h1, h2, h3, p {

font-family: fontName !important;

}

You can also customize the size, font weight, letter spacing, line spacing of your font, along with other font styles. Here’s an example of what that might look like:


h1 {
font-family: 'YOURFONT';
font-size: 35px;
font-weight: 300;
letter-spacing: 0.01em;
line-spacing: 1.5em;
text-decoration: none;
}


That’s it, my friend! Coding doesn’t have to be overwhelming. Don’t hesitate to reach out if you need some extra support. Meet With Us