Update Your Fonts & Colors in Squarespace 7.1

The first three things I do when I begin a new Squarespace website is adjust the colors, fonts and upload a logo. 

When everything is set to match the brand of the business from the start, it makes envisioning where you’ll place the content and how things will all look together way easier. 

Here’s a video to walk you through the process of doing this step by step:

If you’d prefer to read a bit more about it, here’s the basics: 

Let’s start with setting you colors in Squarespace 7.1

There are a few ways you can set a color pallet in Squarespace, we’ll go through all 3 options. 

First off you can find these from within your website, under Design > Site Styles > Colors > Edit Palette

1. Using designer pallets - Squarespace has created about a dozen designer colour pallets that can be used on any of their website templates. They are balanced and beautiful. 

2. Importing a single color - You can use the HSL or hex code for your branding colours to have Squarespace build you a pallet around that color. If you don’t know what the code you need is you can find it with the help of this handy little website. 

3. Uploading image/logo to get custom color pallet - finally the way that I typically set a color pallet in Squarespace is to upload a logo or brand color chart and let Squarespace use those colors in my color scheme. 

Further customising your pallet:

Once you have the color pallet set you can click on Section Themes > The Pencil for the theme you’d like to change and then further edit which colors you’d like specific elements of your website to be like buttons or certain sizes of text. 

Now let’s set your website fonts

Built in web fonts

Squarespace 7.1 has beautiful font pairings built in that you can use (and edit) for across your website.

You can easily change these at Design > Fonts 

This is a fantastic way to get started and the fonts are designed to look nice with nearly any brand. 

If you want to edit one of their custom pairings you can click on The Gear > Headings/Paragraphs > Search & Select a Different Font.

Did you know that you can upload custom fonts in Squarespace? 

This one will be clearer in the video, but with some custom code you can upload a custom font into your website, but you’ll need the actual font file and a little bit of code. You can do this under Design > Custom CSS

To add the font into Squarespace use this code: 

@font-face {    

font-family: 'INSERT NAME';       

src: url('INSERT FONT URL');  }

To set which types of headings and paragraphs use that font use one or more of these lines of code: 

h1 {font-family: 'INSERT NAME';}

h2 {font-family: 'INSERT NAME';}

h3 {font-family: 'INSERT NAME';}

h4 {font-family: 'INSERT NAME';}

p {font-family: 'INSERT NAME';}

Finally, let’s upload your brand’s logo

You can replace your site title (where it says Teaching Site) with your brand’s logo by clicking in near the Navigation Bar (while in the edit screen) > Edit Site Header > Site Title & Logo

Don’t have a logo yet? You can use Canva to build yourself a quick one to hold you over or get in touch with one of my design partners who can help get your branding elements sorted. 

And there you have it!

With these tips you can start your website out on the right foot with custom branding suited perfectly to your blog or business.

Want to get expert help on your website right now?

Website Power Hour

$127.00