How to add third party custom fonts to your squarespace 7.0 and 7.1

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

FAQ: Adding Third-Party Custom Fonts to Squarespace 7.0 and 7.1

1. Can I add custom fonts to Squarespace without using code?

No, adding third-party custom fonts requires using custom code (CSS and JavaScript). Squarespace doesn’t provide a built-in option for uploading fonts directly.

2. What font formats are supported for custom fonts on Squarespace?

Squarespace supports common web font formats such as:

• WOFF
• WOFF2
• TTF
• OTF
• EOT

For best results, use WOFF or WOFF2.

3. Where can I find custom fonts for my Squarespace site?

You can source fonts from:

• Google Fonts
• Adobe Fonts
• Font Squirrel
• MyFonts
• Other professional font marketplaces.

4. Will custom fonts affect my site’s loading speed?

Yes, adding custom fonts can slightly increase load time. Optimize by:

• Using the WOFF2 format for smaller file sizes.
• Minimizing the number of custom fonts.
• Enabling font subsetting to include only necessary characters.

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