How To Add Custom Fonts to Your Squarespace Site

 

Squarespace is equipped with a large selection of fonts, available for use by all users. Specifically, 129 basic fonts are automatically available for all users. Squarespace also provides access to over 600 GoogleFonts and 1000 Adobe Typekit Fonts.

These Google Fonts and Adobe TypeKit fonts are available by simply scrolling further down the list in your Style Editor. The full access to Adobe Typekit Fonts are available to users with an Adobe Subscription. These have to be accessed separately by following these instructions provided by Squarespace Support.

This blog post isn't about those fonts though. This is about truly custom fonts. Whether you design fonts yourself, or you purchase the perfect font on a platform like Creative Market, these instructions are for you. 

Step 1:

Be sure you have the OTF font file. (fontname.OTF)

Step 2:

Upload Custom Fonts to Squarespace

Upload your font file to Squarespace. Go to

You will see "Manage Custom Files"

Click, and upload the OTF Font File from your computer. 

Step 3:

Add custom code to your Custom CSS section.


@font-face {
    font-family: 'INSERT FONT NAME HERE';
       src: url('FONT URL GOES HERE');
    font-weight: 100;
  }

Details:

In the "font-family" portion, you need to add the font name exactly as it appears in the file.

You can see mine is "hitchhikerdrybrush_update-regular" (in the image)

In the "src: url" portion, you need to add the font file URL. This is done by first placing your curser within the two ' ', then click on "Manage Custom Files" and click the file you wish to add. It will be automatically added in the proper place. 

If you are unsure of the font name, you can see it at the end of the URL.

Your font URL will look similar to this: 

https://static1.squarespace.com/static/59dbc475914e6b12a38d848d/t/59e7a70be5dd5ba24426a372/1508353804170/Hitchhikerdrybrush_update-Regular.otf


Now, for the formatting. 

You have to decide which Headings you want to use this new font for. Squarespace is equipped with H1, H2, H3, and Normal Body Text.


h1 {
    font-family: 'INSERT FONT NAME HERE';
    font-weight: 100;
    font-size: 65px;
    line-height: 40px;
}

The code above can be changed for each of the different heading options by changing the H1 to H2, and so on. You can also adjust font weight, font size, and line height. These are settings that would usually be within the Style Editor for your fonts. I recommend playing with the sizes and weights while looking at the fonts live on your site. The line height will help if your lines of text seem to be too spaced out, or if the font is overlapping itself. Be sure to check this on both mobile and desktop. 

You only have to upload a font once, and then add the different formatting codes as you wish. If you want multiple custom fonts, you'll add the files as you did before, and a new section of code, with that URL and Font Name, with the formatting codes to follow. 

I like to add Title/Spacers between my sections of code, so they are easier to find if you need to make edits.

The spacers look like this: // * SPACER TITLE HERE * //


There you have it! Let me know if you have any questions on this code down in the comments, or shoot me an email - hello@ljmediahouse.com

What other customization options would you like to see?

 
 
Add Custom Fonts to your Squarespace Site
 
Pin This!.png