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?
Adding custom fonts is on our roadmap for 2025; however, you don't need to wait. 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>- --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 (New)
You can now customize your site's font scale to adjust how large or small text appears across your site.
1. Go to Site design > Style > Fonts.
2. Adjust the slider to increase or decrease the overall text size. This will apply to all headings and body text.
3. Preview your adjustments in real time before saving.
This allows you to consistently and uniformly adjust readability and visual balance across various devices.