Change fonts on your site

Updated April 22, 2026

A key element in making your Fourthwall site your own is being able to select a font. Luckily, you have over a thousand different fonts to choose from! This article will explain how to change the fonts used on your site or add your custom font.

Font overview

Your Fourthwall site has two main font sections: Heading font and Base font.

• The heading font includes all your site's titles, headers, and section header fonts.
• The base font will be the body of all other text on the website, such as product descriptions, about sections, and donation fields.

Selecting your fonts

1. To select your fonts, go to Site design > Style > Fonts.

2. Open the Heading font and Base font sections. Use the dropdown menus to choose your fonts, and enable the option to display text in all uppercase if desired.


And that's it, you have made your site even more your own!

What if the font I want is not available?

If you are comfortable with custom code and a few steps, you can add your custom font using our custom headcode feature.

1. Once you have your font files, you need to upload them to a CDN (Content Delivery Network). We recommend Cloudflare because it's easy to set up and has a free plan.

2. Go to Site Design > Style > Edit HTML code.

3. This will take you to the custom code for your full site. Here you can enable header or footer code.

3. Drop the code below into the Custom code box. Make sure to replace the following:

• FONT_NAME_HERE
• https://FONT_URL_HERE.woff2

With the correct font name and CDN URL.

<style>
@font-face {
font-family: 'FONT_NAME_HERE';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://FONT_URL_HERE.woff2) format('woff2');
}

body {
--font-family-heading: "FONT_NAME_HERE", sans-serif;
}
</style>

Depending on which font should be updated, override related CSS variables:

• --font-family-base. for base font on the page (product description, etc.)
• --font-family-heading. for heading font on the page (headings).

Adjusting font size

You can customize your site's font scale to adjust how large or small text appears across your site. There are two separate scales:

• Heading font scale: Controls the size of headings and titles (range: 70% to 200%).
• Body font scale: Controls the size of body text such as product descriptions and paragraph text (range: 70% to 200%).

1. Go to Site design > Style > Fonts.

2. Adjust each slider to increase or decrease the text size for headings and body text independently.

3. Preview your adjustments in real time before saving.

This allows you to consistently and uniformly adjust readability and visual balance across various devices.

Override font size for a specific section

You can also override font size at the section level, independent of the store-wide font scale. This lets you make one section's text larger or smaller without affecting the rest of your site.

1. Open a section in the site designer by clicking its name in the Layout tab.
2. Look for the Font size override control in the section's settings.
3. Adjust the scale for that section and save.

If you have any questions, just send us a note at support@fourthwall.com. We'll be happy to help!