Do you feel like your Squarespace site needs a little extra personality? Custom fonts are a great way to elevate your brand’s look. By incorporating unique typography, you can create a cohesive and memorable experience for your audience. Let’s walk through the process of adding your favorite fonts—like Royals and Figura Sans—to your website, step by step.

Step 1: Navigate to the Custom CSS Window

To start, you’ll need to open the Custom CSS window in Squarespace. Here’s how:

1. From your Squarespace dashboard, go to Pages.
2. Under Website Tools (Utilities), select Custom CSS.

The Custom CSS window is where you’ll input the code to make your new fonts work.

Note: Adding custom CSS can break your design if done incorrectly, so proceed with caution at this step!

Step 2: Add Your Font Files to “Custom Files”

Next, you’ll need to upload your font files. This step ensures that Squarespace has access to the fonts you want to use. Click and drag your font files into the “Custom Files” section within the Custom CSS window. Ensure the font files you upload are compatible (e.g., .woff or .woff2).

Step 3: Add Basic @font-face Code to Your CSS Window

Now, let’s get into the coding part. You’ll be telling Squarespace how to incorporate your custom fonts by using the @font-face rule. This code block defines the font and specifies how it should be used:

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

h1, h2, h3, h4 {
  font-family: 'FONTNAME' !important;
}

This step might look intimidating, but it’s simpler than it seems. Each part of the code serves a purpose, ensuring your custom fonts display correctly across your site.

Step 4: Replace “FONTNAME” with the Name of Your Font

Make sure to include the exact name of your uploaded font file, including any dashes or capital letters.

For example:

@font-face {
  font-family: 'Royals-Light';
  src: url();
}

h1, h2, h3, h4 {
  font-family: 'Royals-Light' !important;
}

By accurately naming your fonts, you avoid any potential display errors on your site. Double-check your spelling and formatting before proceeding.

Step 5: Add the Font URL

Click between the parentheses in your src: url(); code, then select the font file from the dropdown. This will automatically insert the file’s URL.

This step links your CSS code to the font file you uploaded earlier, making it functional on your site. If you’re managing multiple fonts, repeat this step for each one.

Step 6: Repeat Steps 3-5 for Italics (If Needed)

If you’re using italic styles, update your CSS to reflect them. Italics can add variety and emphasis to your typography, so don’t skip this step if they’re part of your brand’s look. For example:

@font-face {
  font-family: 'Royals-LightItalic';
  src: url();
}

h1 i, h2 i, h3 i, h4 i {
  font-family: 'Royals-LightItalic' !important;
}

Step 7: Save & Enjoy Your New Fonts

Once you’ve added all your fonts and made the necessary adjustments, don’t forget to hit “Save.” Your website will now display the new fonts wherever specified in your CSS. Take a moment to review your site and make sure everything looks just right.

Love the Fonts in This Example?

If you’re inspired by Royals and Figura Sans, you can find them here:

• Royals Serif Font
• Figura Sans Font

Each font family offers versatile styles that will give your website a polished and professional look!

Customization can seem daunting at first, but with steps like these, you’re well on your way to a standout online presence. Let us know in the comments if this guide helped—or if you’ve fallen in love with Royals and Figura Sans!