Here's the full code:

Tutorial

(Don't have time to read the full post? Watch the video tutorial instead and/or jump to the important notes at the end!)

@Font-face

@font-face is a CSS rule that allows your site to download a font from where it is hosted and use it on your pages. You can think about it as “installing” the font on your website, so anyone can see it without them having to have it on their devices. The process requires adding code to your CSS injection window, but it’s quite simple.

GATHERING THE FILES

First, you need to make sure your font is 100% free to use or you have the corresponding license to use it on your site.

Then you need to check what type of file you have by looking at the extension of the font file you downloaded. You’re going to need at least 3: .tff or .otf, .woff, and .woff2. The different file extensions will provide better compatibility with current and old browser versions.

If you have all the files, great! If you don’t, go to Font Squirrel and click on Generator. This tool will help you convert the .ttf or .otf font file you already have into .woff and .woff2. Click on Upload Fonts, select your font file from your downloads folder (the .ttf or .otf), choose Optimal and check the agreement. Click on Download your Kit.

Inside the zip file you’ll find a .woff and .woff2 file, and along with the original font file you should now have 3 or 4 different file extensions.

"INSTALLING" YOUR FONT

You’ll need to insert some code at the top of your CSS injection window. In Squarespace, go to Design > Custom CSS and paste the following snippet:

The font-family can be any name you want, but it’s easier if it’s just the name of the font. For this example, the font name will be luna.

Inside the parenthesis preceded by url, you’ll need to add the address where that particular file is located. Thus, you have to upload the files into your site.

In order to do it, click on Manage Files at the very bottom of the Custom CSS window and upload the files. To get the URL where they’ve been saved, you can simply click on the file and it will magically appear inside your Custom CSS window, wherever your cursor is. It’s going to be a very long string of characters with the corresponding extension, so it’s best to first click between empty parentheses and then click the file to paste the URL in place.

Keep in mind that if you’re only uploading three files like in the example below, instead of four URL snippets, you’ll need only three. In this case, the url(fontlocation.otf) has been deleted:

USING YOUR NEW FONT

If you want to use that font as the default h1, h2 or h3, you can go back to your Custom CSS window and add this snippet:

h1 {
font-family: 'fontname', 'fallbackfont', genericfont;
}

h1 can be substituted by h2, h3 or even p if you’re looking to change the body text.

Remember to change fontname for the actual font name you used under the @font-face rule (in this case it would be luna), switch fallbackfont for a websafe font and change genericfont for serif or sans-serif depending on what you prefer to be shown if both your font and the websafe font fails to load. For example:

h1 {
font-family: 'luna', 'Impact', sans-serif;
}

If you want to use the new font as a different type of headline or text, you can create one on the same Custom CSS window:

h4 {
font-family: 'fontname', 'fallbackfont', genericfont;
}

This will set the style for a new h4 that can be used anywhere on your site by entering this snippet in a code block:

<h4>Your Text Here</h4>

To change the color and size of your new h4, you'll need to use the color and font-size properties inside the h4 curly brackets you created.

Now go, save time and have fun by adding your on-brand fonts to your site!

To keep in mind

Double-check that the font you're using is 100% free or that the license that comes with it allows you to use it on your site.

When creating a new heading, like the h4, add all the CSS styling properties in your custom CSS window instead of inside the code block where the h4 is located. This will help you avoid copying and pasting repeated styles wherever you create an h4, and it will make it easier for you to alter its properties in the future in only one place.

Don't forget to add a fallback font, even if it is completely different to your original one. This will ensure your content displaying on any device, no matter what.

Until next time,B.

LIKED THIS POST?

I'd love it if you shared!

More Squarespace tips & tricks this way

When I talked about changing the size of mobile fonts in Squarespace at the very end of the post I gave you a quick tip on how to turn off automatic hyphenation. However, I wanted to do a separate post about it since there are some things you should consider when deciding to do it.

If you're using Squarespace's commenting system on your blog, you'll notice you can't change the color of the "Post Comment" black button through your style editor. However, today I want to show you a super easy code trick that you can use to do that and have the button match the rest of your site!

So, you want to create a custom landing page in Squarespace for an opt-in, product, tripwire or even for Instagram and you want to eliminate all distractions from the page so all your visitors have no escape, right? (insert evil laugh here). In that case you probably want to remove the header and footer from your page – otherwise why would you be reading this – so let's dive into how you can do that in your template.

Want to add some CSS to just one page on your site, that's NOT an index section? Don't want to add the code to your page's settings? Then you're going to want to find your page's unique ID to make all the changes you like on just one page of your Squarespace site. But don't worry, it's pretty easy to find. And if you're wondering, yes, this applies to any non-index page of any template!

I know I'm not the only one still running around making sure everything on my site is ready for the GDPR deadline, and since that includes setting the EU cookie banner I wanted to share a quick snippet that my lovely friend Yana Dirkx from Bliss & Gold came up with to make the awful Squarespace cookie banner look much much nicer!

Not feeling happy with how Squarespace is resizing your fonts in mobile? Then let's do something about it shall we? In today's quick tutorial I'm going to show you how you can easily change the size of your fonts in mobile view. Let's go!