Add Custom Font to your Squarespace Website

 

Adding a custom font to your Squarespace website is a great way to set your brand up for success. Follow the steps below.

 
add-custom-font-to-squarespace.jpg
 

1. Download Font Files to your computer

Already have your custom font files? Great! If not, head on over to DaFont or FontSquirrel and pick out a font that compliments your brand.


2. Upload Font Files to Squarespace

DESIGN –> CUSTOM CSS –> Scroll down to the bottom and select MANAGE CUSTOM FILES then click ADD PHOTOS OR FONTS. Upload the font files you’d like to use on your site.

Note: font files generally come with various styles (bold, italic, etc.) so be sure to upload all the styles you’d like to use on your site

custom-font.png
 

3. Custom Code Part I

Copy the code below into your Custom CSS (DESIGN –> CUSTOM CSS)

@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).


4. Custom Code Part II

Now don’t freak out but the next step is more in depth. You’re going to delete the fontFile.woff in your code and while your cursor is in the middle of the ( ) where fontFile.woff use to be you’re going to click on MANAGE CUSTOM FILES and select the font you want to use. This is going to automatically insert a url into your code for your font file.


5. Custom Code Part III

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;
}


6. Do a Happy Dance

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

xo Erin