Three Ways to Use Custom Fonts in Squarespace

We’ve seen it countless times: Your designer delivers an impeccable style guide, with an eye-catching logo, a crisp color palette, detailed image guidelines, and pitch-perfect fonts. Then, you pass this work of art along to your web team, only to find that those long-fretted-over fonts are not included in Squarespace’s library of more than 1,500 fonts. Ack!

We have two important pieces of advice for this scenario:

1. Do NOT allow a designer to create a style guide for you without full consideration of your digital brand! (That includes your website and your email marketing templates.) Your digital touchpoints with clients and customers are crucial to your brand, and they should be considered at the front end of this process.
2. Worry not! You’ll be able to upload your custom fonts to Squarespace, and they will look absolutely perfect.

Behold, the three most common ways to upload custom fonts to Squarespace:

Standard Upload

1. Upload Your Font: In your “Custom CSS” panel, scroll to “Manage Custom Files,” and select the font file you’d like to upload from your computer.
2. Link Your Font: Add the following snippet to your “Custom CSS” panel, replacing FONT NAME with your font name and FONT URL with your font URL. (Insert this URL by highlighting FONT URL, clicking on “Manage Custom Files” and selecting your font file.)

@font-face {
font-family: 'FONT NAME';
src: url('FONT URL');
}

1. Assign Your Font: You can assign your custom font to your h1, h2, h3 or body text styles, or you can add an additional text style. Regardless, the code for each assignment is quite simple: h1 {font-family: 'FONT NAME';}
2. Style Your Font: Add any additional text formatting properties you’d like, using this trusty CSS Text guide from w3schools.com.

Cloud.Typography Fonts

1. Log in to your cloud.typography account and create a “Project.”
2. On your Project page, click on the Tools cog in the upper right. Copy your CSS Key and paste it into Settings > Advanced > Code Injection > Header in Squarespace.
3. Go to Design > Custom CSS in Squarespace and configure your font styles by copying the text formatting properties from cloud.typography (listed under Font Styles). Your code should look like something this:
4. h1 {
   font-family: FONT NAME !important;
   font-style: normal !important;
   font-weight: 600 !important;
   }
5. h2 {
   font-family: FONT NAME !important;
   font-style: italic !important;
   font-weight: 600 !important;
   }
   
   p {
   font-family: FONT NAME !important;
   font-style: normal !important;
   font-weight: 400 !important;
   }
6. Move into “Production Mode” before your project goes live. In this process, you’ll have to download the fonts and move them to a secure location on your server. Follow cloud.typography’s instructions for this process.

Adobe Fonts

Thanks to Squarespace’s integration with Adobe Fonts, you can select from more than 1,000 fonts, or add a custom font project to your website. We recommend consulting Squarespace’s detailed directions for adding Adobe Fonts.