Installing Custom Fonts

Adding custom fonts is one of the best ways to start making your website NOT look like a Squarespace Template.

🛑NOTE: This is a guide on how to install any custom font on your Squarespace site. If you are currently working on Halcyon in our Squarespace Design Course, use MaisonNeue Book as your font as you work through this guide.

Download the fonts

For this example, we'll be using the font Romana by Gustav Schroeder and Theophile Beaudoire. Since Romana doesn't have a trial font, we are going to download the font from the ilovecreatives website for this test example. You can see Romana here. Please purchase the fonts if you intend to use them on any work. They are designers too! Otherwise, sign up for the trial font on their website if it's an option.

🛑 Halcyon: Find MaisonNeue Book in the template.

In Google Chrome go to ilovecreatives.com
Hit option + command + i to open the Developer Tool
Go to the Network tab and select Font
Hit command + R to refresh
Double click on Romana.woff2 to download

Convert the fonts

We need to convert fonts to specific formats so they can appear on browsers correctly. When buying web fonts, purchase the .otf and .woff font formats.

For Romana, we downloaded a WOFF2 file so we will have to convert it to OTF and WOFF. We like to use convertio.co.

**What about the other font formats? You won’t need them! Learn more from this Font Formats and Browser Support page.

Upload fonts

On your website...

Go to Design > Custom CSS
Click Manage Custom Files button at the bottom of the window
Then click on Add images or fonts
Add RomanaBT-Roman.otf and RomanaBT-Roman.woff

🛑 For Halcyon: Add MaisonNeue-Book.woff

Add @font-face CSS

Copy and paste this CSS into the Custom CSS panel.

/* FONT FACE ************************/
@font-face {
  font-family: '';
  src: url('') format('otf'),
       url('') format('woff');     
} 

Add your cursor in between the url ‘ ’, click Manage Custom Files, and select the appropriate font. Do this for OTF and WOFF.
Add the name of the font-family name in between ‘ ’. Make sure your font name matches the font file.
- NOTE: in the GIF we named the font 'RomanaBT-Roman' because that is the font file name. You need to make sure they match.
- 🛑 For Halcyon: Make sure it says 'MaisonNeue-Book'
Hit Save.

TIP Upload each font individually and add each URL individually. — **TIP** Upload each font individually and add each URL individually.

You'll notice that your fonts have not changed on your website, that's because we've only installed the fonts so far. Now we have to apply them with some additional CSS.

Create a Style Guide page

Remember this guy? Just copy and paste the text from www.ilovecreatives.com/style-guide 😉 This helps you keep track of all your styling.

Apply CSS Fonts to HTML Elements

Here is a list of some of the HTML font selectors (h1, h2) in Squarespace 7.0 that can be customized with CSS fonts!

🛑 NOTE: If you are working on Halcyon, do not copy and paste these into your CSS. This is only an example. Refer back to the Halcyon Instructions on where to apply MaisonNeue Book.

/* FONTS **********/
h1 {
  font-family: 'RomanaBT-Roman' !important;
}
h2 {
  font-family: 'RomanaBT-Roman' !important;
}
h3,
p {
  font-family: 'RomanaBT-Roman' !important;
}
.sqs-block-quote,
.Blog-title,
.BlogList-item-title,
.BlogItem-title,
.form-title,
.site-title,
.mobile-branding-wrapper .mobile-site-title a {
  font-family: 'RomanaBT-Roman' !important;
}

TIP: Don’t see your custom font on your style guide? Try refreshing your browser.

Now you can go into Site Styles and change the font size, font weight, letter spacing, and letter height. But note that your installed font name will not show up in Site Styles! If you are unsure if the font applied correctly, you can double-check with the Developer Tool.

Watch the video to see how Puno…

Finds the HTML font selectors in the Developer Tool by inspecting classes
Adds font selectors to the Custom CSS panel
What to do when you have multiple selectors that are using the same font

Coding Tips:

When to use !important?

Squarespace sometimes targets the elements stronger than the simple version as above. Be careful with adding too many !important attributes. Try seeing if it works without it. If not, try adding more specific CSS IDs and/or Classes. This is why I like creating a Style Guide. You can see how !important messes with other styles.

Organizing your CSS

Here are some tips on how to keep your CSS tidy.

Comment your CSS: Add comments as you add in code. It makes it easier to find code later when you are doing revisions. The font face code we are using above is commented with /*FONT FACE***************/ — the forward slashes and asterisks combined are not coding syntax (code rules) so it doesn't affect your code.

Formatting readable CSS: Break everything onto a new line and leave a couple of line breaks between each code syntax to keep it easy to read.
Keep it consistent: Choose your style and keep to it! It's all about keeping everything readable and easy to edit.
No duplicating: Try to make sure you don't have any duplicating code. It's confusing and will only add to the site's load time. If there's no need for it, get rid of it!

/*THIS IS A COMMENT*****************/

h2 {
	color: #000;
}

/*NOTICE THE SPACING GOING ON*******/

.Header--top,
.Mobile-bar--top {
    border-bottom: 1px solid #222;
}

TIP: If you are commenting and the Custom CSS panel is giving you an error when you are coding, make sure your comments are closed off correctly and not affecting your code.

Use a Code Editor

Make sure that you start saving versions of your CSS. You can use a code editor like Sublime or even keep your code snippets organized in a Notion document.

There isn’t version control on Squarespace so if you mess up, it’ll be way easier to revert back if you had a copy.

Also, a good habit to copy and paste all the CSS vs. the lines you changed.

Code SnippetsPunoOctober 13, 2022Section 1 - Pedro