How to Add Custom Fonts to Your Squarespace Site – Easy Guide

Howdy, folks! Louise here from Lucky Night Studio. Today, I’ve got a super handy tutorial on how to add custom fonts to your Squarespace site. It's a little techy since it involves some coding, but don't worry—I’ll make it as simple as pie. Ready to jazz up your web pages? Let’s dive right in!

Start with the Basics

First off, navigate to Website Pages, then hop over to Website Tools and click on Custom CSS. This is where the magic begins as we add our own personal touch with some CSS.

Upload Your Custom Font

Before we get coding, you’ll need a font file—either an OpenType or TrueType font will do. Head over to a site like dafont.com, which offers a slew of free files. Just make sure to check the licenses. For this tutorial, I’m using the adorable ‘Coffee Cake’ font because it’s as sweet as it sounds!

Adding the Font to Squarespace

Upload your chosen font to Custom Files in your Squarespace dashboard. Once your font is uploaded, we need to make it accessible with some CSS magic:

1. Use @font-face to declare your font in CSS.

2. Define the font-family and specify the source file (the font you uploaded).

   Here’s a snippet to get you started:

@font-face { 
  font-family: 'CoffeeCake'; 
  src: url('path_to_your_font_file');
}

Applying the Font

Now, just because your font is chilling in the CSS, doesn't mean it's being used yet. You need to explicitly set it for different elements across your site.

For demonstration, let’s change our headings to use ‘Coffee Cake’:

h1, h2, h3 { font-family: 'CoffeeCake'; }

Remember, if you use this font in a more extensive text body, it might be a bit hard to read. So perhaps reserve those fancy fonts for titles or buttons!

Adjusting Site Styles

Next, let’s apply our custom font across various elements like buttons, titles, and navigation in the site styles. Here's how you can link these styles to the new font:

body {
font-family: fontName;
--primary-button-font-font-family: fontName;
--secondary-button-font-font-family: fontName;
--tertiary-button-font-font-family: fontName;
--body-font-font-family: fontName;
--heading-font-font-family: fontName;
--meta-font-font-family:  fontName;
--site-title-font-font-family:  fontName;
--mobile-site-title-font-font-family:  fontName;
--site-navigation-font-font-family:  fontName;
--header-button-font-font-family: fontName;
.entry-title {font-family:fontNamet!important}
.blog-title {font-family:fontName!important}
}

Final Touches

Once you've made your changes, take a moment to review your site. If everything looks good, save your settings and voila! Your site now sports a fabulous new font that makes it stand out from the crowd.

Wrapping Up

And there you have it—adding custom fonts to your Squarespace site isn't just doable; it’s a great way to give your site a unique flair. If you have any questions or need a bit of extra help, drop a comment below or check out the full code in my linked blog post.

Remember, the right font can really set the tone for your website, so have fun and experiment to see what works best for your brand!