Seriously, what is the BEST and most PRACTICAL way to upload and use custom fonts in Squarespace 7.1 - but without using code blocks and creating h6, h7, h8, etc.?

In this blog post, I’m going to show you how to convert .otf or .ttf files INTO website readable files (.woff and .woff2 files) AND import multiple custom fonts into Squarespace 7.1 in a way that is MOST SEO friendly!

And then… I’ll show you how to set your Headings and Paragraph fonts to your new Custom Font!

If you want more CSS snippets, feel free to download my Top 15 Squarespace CSS Cheatsheet:

Step 1: Purchase/Download your Unique Fonts

Where can you find unique fonts? I get all of mine from Creative Market and these are some of my favourite fonts to use:

• Amalfi Coast

• Impressionist

• La Luxes Script

Step 2: Convert files to Web Format

Let me just quickly categorize font files for you:

• Desktop files are either .otf or .ttf

• Website files are either .woff or .woff2 (usually both)

eg. If you purchase a website license from Creative Market, you will receive the .woff AND .woff2 files. But if you ONLY purchase the Desktop file, then you only get the .otf or .ttf file.

IMPORTANT: soooo… if your custom font was a paid font (ie. from Creative Market) then by LAW you are obliged to purchase the Website License if you want to use the custom font on your website!

Thus, if you purchased a Website License, then you will have the .woff and .woff2 fonts - so feel free to skip to Step 3!

BUT if you just downloaded a free font from Google Fonts or something and you don’t have the .woff or .woff2 fonts, then here’s a quick shortcut:

1. Go to Font Squirrel’s Font Converter

2. Tick the Optimal option

3. Make sure you have the legal rights to convert the fonts you’re about to upload before you tick the Agreement (generally most free fonts)

4. Let it run

5. Hit download zip file!

Step 3: Upload files to Squarespace

1. Navigate to Design > Custom CSS

2. Click on Manage Custom Files at the bottom

3. Click on the Up Arrow that says “add images or fonts”

4. Find the font files (.woff or .woff2) and upload from your computer

5. Now click anywhere outside the box to exit.

When you click ‘add images or font’ - it will pull up your computer files. Find your .woff and .woff2 files on your computer and click on it. (eg. I clicked on SometimesTimes.woff and .woff2)

Once I have the font file (SometimesTimes.woff and .woff2) loaded onto my Squarespace platform, I can continue with the below steps.

All you have to do now is copy and paste the code in Step 3, then after url(‘ everything in blue‘), highlight and replace with YOUR custom font by simply clicking on the font file (SometimesTimes.woff and .woff2)

Note: I purchased the rights to the web license for the font Sometimes Times.

Step 4: Insert Custom CSS Code

1. Copy and paste the code above.

2. Rename the ‘green’ font family with your own. If the font is called Sometimes Times, you can shorten it to ST or anything you want! This will be your ‘code word’, so that every time you use it, Squarespace will know which font you’re referring to.

3. Make sure there are no spaces or hyphens instead of a space.

4. Highlight the next green section from https:// to the );}

5. Delete this and replace it with the font file that you uploaded to your “Manage Custom Files” in Step 2 above.

6. Make sure you have the single apostrophe ‘ around the link file ’

Great! Now you’ve successfully imported your fonts!

Step 5: Customise your Headings and Paragraphs with CSS

Now let’s use those fonts and override Squarespace’s Heading Fonts by using a little code magic!

1. Navigate to Design > Custom CSS

2. Copy and Paste the below code

3. Swap out the green part (ie. sometimes-times) with YOUR custom font name.

* Trouble-shooting:

• make sure you have the single apostrophe around the font name;

• make sure you didn’t forget the semicolon ; at the end ;)

• make sure there all word spaces have a hyphen — between it.

VOILÀ - this is my Heading ONE in my CUSTOM BRAND font Sometimes Times.

Step 6: BONUS for custom Italic version

So for an Italics version, like my Sometimes Times font, I had to upload a separate font file for that and add some extra CSS code!

Basically repeat steps 3 & 4 for your Italics font file (ie. sometimes-times-italics.woff or .woff2)

Then when you get to step 5, just add: em after H1, H2, H3 and H4 and p

*em signifies italics, so h1 em means when my h1 text is italicized, then use this custom font: sometimes-times-italics.

Are you loving these CSS tricks and want more? Grab my top 15 Squarespace CSS snippets (for 7.0 and 7.1). Try them out and watch the magic happen!

Let me know how you went in the comments below or if you still have any questions!

Similar articles you will love ….