Customizing fonts on your website

A quick walk-through on how to add your brand colors & fonts to your Squarespace 7.1 website!

this video covers:

changing site fonts (with built-in options)
*ADVANCED — Uploading & using custom brand fonts (coming soon)

For more information, PLEASE see this documentation from Squarespace.

VIDEO TRANSCRIPT

 in this video, I'm going to show you how you can customize all of your fonts using the built in fonts and font styling options that Squarespace provides. Let's get started.

 Squarespace has a ton of really great built in font options, and it's really easy to make edits and changes to them. To start, we'll go into Edit, Site Styles, and head over to Fonts. The first thing to notice about our fonts is that there's this overall base size. As you change the base size, it's going to scale and change the font sizes of every single font across your site.

So you'll want to choose the base size based on your paragraph 2 font, which is going to be your default body font that pops up whenever you start typing a new text. block. In this case, for this particular font, I'm keeping it at a base size of 16 because this font's pretty delicate and pretty small, but in lots of cases you could use a base font size of 12, 14, so on and so forth.

You just want to be basing it on the actual font that you're using and making sure that it's not too small and illegible.

To choose our individual font faces, we have options for headings, paragraphs, buttons, and then miscellaneous.

Squarespace does have font packs that you can play with. These are already pre selected font combinations so feel free to browse any of those and see if any of them fit with your branding if you don't already have fonts decided on. But if you already have brand fonts that you know you want to use, we'll go into general global text styles, and this is where you'll make individual edits to your headings and paragraphs.

For headings first, we'll select our family, and Squarespace has a ton of different font options already built in, so we'll go to Browse All Fonts, and you can select the font that works for you there. Once we've selected the font that works for us, we'll go back into our overall font editing selections.

We can change the font weight to make it thinner or more bold. We can change the style so we can make it italic if we prefer. And then for our headings, I usually recommend sticking with a line height of 1. 2 to 1. 4. You'll see the difference as we change our line height, what that does. Our letter spacing, again, very much dependent on your font. I, for example, love using wider letter spacing for my subheadings whenever I'm using sans serif fonts.

It just makes the lettering look a little bit more modern, a little bit more spaced out, and a little more legible. Text transform, if you know for sure you want to have all of your headings be uppercase, then you can change that to uppercase.

So here's where we can customize the sizing for each of our individual header options.

The easiest way to figure out a font sizing that looks great is to have all of your headings and text options available on one page so you can see them relative to one another. You're going to want your headings 1 and 2 to be your largest headings, and then I usually recommend using heading 4 and also paragraph 1 for subheading options.

So as you can see, we can change the sizing, and this will just change the sizing of the individual heading options. So play around with that to see what works best with your fonts. Paragraphs, same deal. We have the family, weight styles, letter spacing, and then the sizing options for the individual paragraphs.

Again, your paragraph 2 is going to be the base font that is used across your site.

In this case, I actually set my paragraph 2 to be a little bit larger than the base size of 16 points.

And you may need to end up tweaking it again just based on the fonts that you pick.

Our button fonts are also edited within this panel as well. For buttons, I typically recommend a super legible font. For the most part, I'll typically actually just duplicate the exact same settings I used for my subheadings and copy them over to my buttons as well.

Miscellaneous is typically going to apply to random site layouts and built in Squarespace functionalities like gallery sections and blog posts.

​For now you could go ahead and update it to the same as your subheading font, or just leave it as is, and if you see any fonts pop up as you're adding sections to your site that don't match, it's probably a miscellaneous feature. One of the great things about Squarespace as well is that you don't necessarily need to search for a function within your site styles.

Once you've entered into your fonts section, so once we've gone into site styles, fonts, you can actually hover over any option. And when you click it, it will take you to the appropriate area. So clicking on the paragraph took me to the paragraph section, and clicking on buttons takes me to buttons.

The same thing will happen when you click on random site functionalities, so when I click on our header text, that takes me to our site navigation, so that I can change and customize the text. I typically, for navigation items, like the header and footer navigations, recommend keeping them the same as your subheadings. This helps keep it simple, legible, and clean.

 For instructions on how to upload a custom brand font that you can't find within the Squarespace font library, for example, some cool designer fonts like these, Please see my video on uploading custom fonts to Squarespace. It does require a little bit of CSS coding, so it is a little bit more of an advanced option.