Paige Brunton

View Original

How to add your own font to Squarespace (7.0 & 7.1)

Paige Brunton

Prefer to watch?

Here’s that step-by-step video for ya!

MENTioned in the video:


Squarespace Custom font CSS

Below you’ll find the copy-and-paste custom Squarespace CSS you’ll need to follow along with today’s tutorial!

The bolded bits are the ones you will be changing for your own site!

import custom font

@font-face

{ font-family: ‘yourname’;

src: url(url goes here); }

assign custom fonts in Squarespace 7.0

// Heading 1 //

h1 {font-family: 'yourfont';}


// Heading 2 //

h2 {font-family: 'yourfont';}


// Heading 3 //

h3 {font-family: 'yourfont';}

// Normal //

p {font-family: 'yourfont';}

assign custom fonts in Squarespace 7.0

// Heading 1 //

h1 {font-family: 'yourfont';}

// Heading 2 //

h2 {font-family: 'yourfont';}

// Heading 3 //

h3 {font-family: 'yourfont';}

// Heading 4 //

h4 {font-family: 'yourfont';}

// Paragraph 1 //

.sqsrte-large {font-family: 'yourfont';}

// Paragraph 2 //

p {font-family: 'yourfont';}

// Paragraph 3 //

.sqsrte-small {font-family: 'yourfont';}

style your custom fonts

h5 { font-family: 'font name' !important;

font-size: 60 px;    

  font-weight: 300;     

  color: #000000;

  letter-spacing: 7pt;

  line-height: 2.5em; }

Rather read than watch?

Here’s those steps written down…



Wondering how to get that dreamy custom font you’ve been eyeballing off of your wishlist and onto your Squarespace site?

By the end of this tutorial, you’ll know how to quickly and easily upload your own custom fonts, as well as how to use them to replace your current fonts, OR to create brand new, additional font options such as an extra header or paragraph font!

See this gallery in the original post



What you’ll need…

Besides the CSS I included above (not as techy and overwhelming as it looks! Promise!🤞) we are also going to need to get our hands on a custom font we love!

If you don’t already have a font picked out, one of my favorite places to shop design elements for use with Squarespace sites is Creativemarket.com.

Etsy is another great one, and pretty much any online font shop or free library! (Wherever you get your font, just make sure you have the license to use it!)

For this tutorial, you’ll need to have your custom font files saved directly to your computer.

I’m going to go ahead and grab a free font from Google fonts for use in my example.

So I’ve already downloaded a font called ‘Charmonman’ to my desktop, and opened the zipped file it came in so I can get access to the goodies inside.



How to add your own custom fonts to your Squarespace site



Step 1:

Uploading a custom font in Squarespace

This step looks the same no matter which version of Squarespace you are using.

So first we are going to head under your design panel > custom CSS.

Pro tip! If your Squarespace menu looks different to this then you can hit “SHIFT” and forward slash to search menu items, and type in what you’re looking for (in this case CSS) It’ll pop up & you don’t need to go a huntin’!

Scroll down to where it says manage custom files, and then upload your file.

Your custom font should have downloaded as either an .OTF, .TTF, or .WOFF file format, and it may have come with several variations of your font, like bold, semi-bold, regular, or thin.

I’m going to upload the regular version of my custom font for this tutorial!





Step 2:

Assigning your custom font to an existing font formatting option

Onto the next step, which is importing your uploaded font, then assigning it to replace one or more of your built-in font option.

This step looks just a tad different depending on which version of Squarespace you are using to build your site, because when designing in Squarespace 7.0, you’ll have a heading 1, heading 2, and heading 3, and normal (or the paragraph type font you’d use in the body of your content)…

Whereas in Squarespace 7.1, you actually have 4 total headings, and 3 total paragraph font options in your text toolbar drop-down menu.

So let’s use the CSS from above to assign our new font to one of our existing font options, but first we need to tell Squarespace where to find the file for the new font we are assigning!



Copy & paste this css into your CSS editor window (design> custom CSS):

@font-face

{ font-family: ‘yourname’;

src: url(url goes here); }



Then replace ‘yourname’ with whatever you are going to call your font.

It doesn't have to match its real name BTW! It can be a shorthand or nickname. As long as you write it the same way every time, Squarespace will know you are trying to use your new custom font.

Then, we need to grab the URL of the font we just uploaded to Squarespace, by clicking manage custom files, click on the font, and it will automatically populate the URL for us.

(You just want to make sure your cursor is set between these two parentheses/brackets before you click it so that the URL ends up sandwiched between them.)

Now that Squarespace knows what we are calling our custom font and where to find it, we can start assigning it to whichever fonts we please.

It’s definitely helpful to write out a sample of each one of your fonts so you can watch those updates happen in real-time!

Like this…


This is a sample of my heading 1

This is a sample of my heading 2

This is a sample of my heading 3

This is a sample of my normal/paragraph font



Now we need to grab the bit of CSS that relates to the font option we are trying to assign our new font to (make sure to grab the right one from above based on whether you are designing in 7.0 or 7.1)

So to assign my new font to my Heading 1 font option in my text block drop-down menu, I would grab this bit of CSS 👇, making sure to change the font name to my custom font name ‘Charmonman.’




h1 {font-family: 'yourfont';}




Now, everytime I select heading 1 from the drop-down, it should now use my new custom font!

If you need to make changes to its size, weight, spacing etc. you can do that using the built-in site style editing features.

Just go to Design > fonts, click the element you are trying to edit and your options will appear.

This saves you adding unnecessary CSS to your site, which can slow down your site load speed, but also create more opportunities for human error, and if you’ve ever worked with CSS before, you know all it takes is one misplaced comma or bracket to seriously mess with your design.

One thing to note is that you will no longer be able to edit the font family (ie. Ariel, Charmonmon, Times New Roman) in your design panel since the CSS you added is overriding the built-in features.

So in order to swap out a different font family, you’d have to crack back open that CSS window (design > custom CSS).




So that is how you would swap out one of your current font formatting options...

But what if you want to add an additional option, on top of what’s natively here in your text block drop-down menu? Say a heading 5 and 6?

See this gallery in the original post


How to add additional fonts in Squarespace (H5, H6, etc.)

This second option for using your new custom font is pretty quick and easy, and a great way to add an extra bit of flair to your fonts without having to replace the headers you are already using throughout your site.

You can technically add as many new fonts as you like, but to stick with design best practices I definitely recommend limiting yourself to just a few fonts that you use consistently throughout your site.

Since we can’t go adding extra options to this drop-down menu, we will need to rely on using code blocks to get our fancy new text on the page.


So here’s how that’s done...

  1. Add a code block.

  2. Decide what you will call your new font formatting option, I’ll call mine heading 5 or h5.

  3. Place the name of your new font formatting option into your code block between two of these brackets: <h5>

  4. Write out the text you want appearing on the page…

    <h5> This is a sample of text in my heading 5 font <h5>

  5. Hit save and head back into my CSS window (design > custom CSS).

    Now I just need to tell Squarespace how to style it! But since this font format is not natively available in Squarespace, I can’t use my site styles editor to tweak its size, weight, color, spacing etc. so I have to use CSS to code that in.

  6. Copy and paste this bit of CSS:

    h5 {

    font-family: 'font name' !important;

    font-size: 60px;

    font-weight: 300;

    color: #000000;

    letter-spacing: 7pt;

    line-height: 2.5em; }


By changing the bolded font properties, I can make it bigger or smaller, heavier or lighter, use color codes to change its color from the default black, change the letter spacing, and line spacing!

So that is how you add your custom font as an additional option, rather than swapping out one of your current fonts!

See this content in the original post
See this content in the original post

You’ll Also Love...