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 > Typography
2. There, you will see the Heading font and Base font sections, where you will find dropdown menus with all the font options for you to select, as well as the option to transform into all uppercase fonts across your site.
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 Code (Advanced)
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 "FONT_NAME_HERE" and "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>