How to Add Custom Fonts to Squarespace

share

I get this question all the time from people attempting to DIY their own Squarespace websites. “Do you know if it’s possible to add my brand fonts into Squarespace?”

Yes, it is possible and highly encouraged! It just takes a bit of coding. Adding custom fonts is the best way to keep your brand consistent and have a DIY website not look like a DIY website. Here is how you install custom fonts and apply them to the basic headings and paragraphs.

Upload your font into Squarespace

In your Squarespace menu, navigate to Design > Custom CSS.

Scroll down and click on the button that says Manage Custom Files.

Click Add images or fonts and locate the font file from your computer to upload it. Note that it’s highly recommended that you also upload a web-licensed font file. You’ll be able to tell it’s a web font if it’s labeled .woff or .woff2.

Once that’s done, copy and paste the following CSS code into the Custom CSS area.

/* FONT FACE */
@font-face {
  font-family: '';
  src: url('') format('otf'),
       url('') format('woff');
}

Type the name of the font you are adding in between the ‘ ‘ marks after font-family.

Next, add the source URL. This is where your font is being stored within Squarespace. Click your cursor between the ‘ ‘ after “src: url.” Click on Manage Custom Files again and, click on the custom font you just uploaded. The URL will automatically be added to your CSS code in between the marks. Ensure you’ve put the correct file types next to the right formats.

*If you have a .woff2 file instead of .woff, simply change format (‘woff’) to format (‘woff2’).

Apply the font to your website

Next, you’ll need to apply the font using CSS code. To do that, you’ll want to add the following code to your CSS window underneath the @font-face code from above:

/* FONTS */
h1 {
font-family: 'CUSTOM FONT' !important;
}

h2 {
font-family: 'CUSTOM FONT' !important;
}

h3 {
font-family: 'CUSTOM FONT' !important;
}

p {
font-family: 'CUSTOM FONT' !important;
}

Replace CUSTOM FONT with the name of your font matching what you wrote under the @font-face portion. If it doesn’t match exactly, it will not function. Also, make sure to keep ‘ ‘.

If you only want to apply the font to your h1 header, only copy and paste the h1 portion of the code. The same goes for h2, h3, and h4. If you’d like a different custom font for any of those, particularly the paragraph font, repeat all the steps above for the other font.


Leave a Reply

Your email address will not be published. Required fields are marked *