How to Add Custom Fonts to Your Squarespace Wedding Website

While Squarespace offers a beautiful range of built-in typefaces, we know some couples have their heart set on something more personal—whether it’s the font from your invitations, a typeface that perfectly captures your aesthetic or just one you’ve fallen in love with along the way.

At The Foyer, we believe your wedding website should feel just as intentional and elevated as every other detail of your day. And one of the most transformative (yet often overlooked) design choices? Typography. The right font can completely shift the vibe of your entire site—soft and romantic, modern and minimal, classic and editorial. It’s one of the simplest ways to make a template feel uniquely you.

Below, we’ll walk you through how to add custom fonts to your site—whether you’re uploading a font file or using Adobe Fonts—and how to apply it seamlessly across your template with a few lines of CSS.

Because your website should feel as thoughtful as the event it’s leading up to.

1) Prepare your Font Files

Before you can upload your custom font, you’ll need to make sure it’s properly licensed and in a format supported by Squarespace 7.1. The platform accepts the following file types:

• .otf (OpenType Font)

• .ttf (TrueType Font)

• .woff (Web Open Font Format)

If you’ve worked with a designer or stationer, they may have already provided your font file. If not, you can purchase one from trusted sources like MyFonts, Creative Market, or Fontspring. Be sure to check that your font includes web usage rights, especially if you’re using it online for the first time.

2) Upload Your Font(s) to Squarespace

In your Squarespace editor, go to Pages > Website Tools > Custom CSS.

Click on Custom Files.

Upload your .otf or .ttf font file.

Once uploaded, click the file name to insert its URL into the CSS editor—it will look something like this:

3.) Add the @font-face Rule

At the very top of the Custom CSS panel, paste this:

@font-face {
  font-family: 'YourCustomFont';
  src: url(https://static1.squarespace.com/static/your-path/font-name.otf);
}

Find the part of the code that says 'CustomFontName' and change it to the name of the font you’re using. In this case, I’m using Palm Canyon Drive, so I’ll type that in—or just shorten it to something like Palm. It doesn’t have to be the official name, but using something that clearly relates to your font makes it easier to recognize later if you need to come back and edit.

Next, grab the link to your font. Just click on the font file you uploaded under Custom Files and Squarespace will automatically add the link into your CSS box. Copy that link and paste it right between the quotation marks where it says url('') in your code.

Adding and Assigning Additional Fonts

If you're working with more than one custom font—for example, one for headings and another for body text—you can simply repeat Steps 1 and 2 for each additional file. Each font will need its own @font-face rule with a unique name, and you’ll assign each one to the right areas using the selectors in Step 4.

4.) Apply the Font Across Your Website

Now that your font is uploaded, it’s important to note that it won’t appear in the usual Squarespace font settings alongside the built-in options. That’s normal so don’t panic. To use your font(s) across the site, we’ll need to add some snippets of code.

Luckily, we’ve outlined the most common sections you may want to update—like headings, body text, buttons, and navigation—so you can easily apply your font exactly where you’d like it to appear across your site.

Headings

h1 {
font-family: 'font-name';
}

h2 {
font-family: 'font-name';
}

h3 {
font-family: 'font-name';
}

h4 {
font-family: 'font-name';
}

Paragraphs

.sqsrte-large {
font-family: 'font-name';
}

p {
font-family: 'font-name';
}

.sqsrte-small {
font-family: 'font-name';
}

Buttons

// Primary Button //
.sqs-block-button-element--medium {
font-family: 'font-name'
}

// Secondary Button // 
.sqs-block-button-element--large {
font-family: 'font-name'
}

// Tertiary Button //
.sqs-button-element--tertiary {
font-family: 'font-name'
}

Site Header

// Site Title //
.header-title-text a {
font-family: 'font-name'
}

// Navigation Links //
.header-nav-item a {
font-family: 'font-name'
}

// Mobile Navigation //
.header-menu-nav-item a {
font-family: 'font-name'
}

Form Block

// Form Title Text //
.sqs-block-form .field-list .title {
font-family: 'font-name'
}

// Form Caption Text //
.sqs-block-form .field-list .caption-text {
font-family: 'font-name'
}

// Form Input Field //
.sqs-block-form .field-list .field input, .field textarea {
font-family: 'font-name'
}

5.) Add Extra Styling (Optional)

If you’d like to take things a step further, you can use CSS to adjust how your custom font appears—like changing the size, color, or spacing. This is completely optional but can be a nice way to refine certain elements and create a more tailored look. Below is a simple example of how to style an h4 heading using your custom font. You can update the values to match your design preferences.

h4 {
font-family: 'font-name';
font-size: 16pt;
color: #000000;
letter-spacing: 2px;
}

Final Notes

Custom fonts are one of those quiet design decisions that bring everything together. Whether you're continuing the type from your invitations or adding something entirely unique, it's a beautiful way to create consistency across your wedding aesthetic.

If you’re using one of our templates, you already have a clean foundation—this is just the layer of polish that makes it yours. And if you’d like support tailoring your fonts, styling, or overall design, we offer upgrades and custom options to help bring your full vision to life.

Because the little details aren’t so little after all.