---
title: Change fonts on your site
shortDescription: 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!
articleType: Tutorial
primaryTopic: font-customization
categories:
  - Store Design
  - Developer Tools
tags:
  - typography
  - font
  - all-caps
  - uppercase font
  - custom font
tasks:
  - Select heading and base fonts
  - Add a custom font via CDN
  - Adjust font size scale
  - Override font size for a specific section
  - Set text to display in all uppercase
terms:
  - font
  - typography
  - change font
  - custom font
  - upload font
  - font size
  - heading font
  - base font
  - CSS
  - custom code
  - all caps
  - font scale
  - per-section font size
  - section font override
labels:
  - typography
  - font-customization
  - custom-code
contextString: Available on all Fourthwall plans. Accessed via Site Design in the creator dashboard.
breadcrumbPath: "Getting started > Design my storefront > How to change fonts on your site"
path: getting-started/design-my-storefront/change-fonts
relatedModules:
  - name: theme-font-change
    route: /admin/dashboard/store-design/general/font-change
  - name: theme-editor-pages
    route: /admin/dashboard/store-design/pages/
  - name: theme-editor-layout-memberships-perks
    route: /admin/dashboard/store-design/layout/memberships_perks
  - name: theme-editor-layout-checkout
    route: /admin/dashboard/store-design/layout/checkout
  - name: theme-editor-layout-home
    route: /admin/dashboard/store-design/layout/index
last_updated: '2026-04-22'
---

# Change fonts on your site

Your Fourthwall site uses two font settings: a Heading font for titles and section headers, and a Base font for body text like product descriptions and about sections. You can choose from over 1,000 built-in fonts, adjust the global font size scale, override font size per section, or add a custom font using the custom head code feature.

## Font overview

Your site has two main font sections:

- **Heading font**. Controls all titles, headers, and section header fonts across your site.
- **Base font**. Controls the body text on your site, including product descriptions, about sections, and donation fields.

## How to select your fonts

1. In your Fourthwall dashboard, go to **Site Design** > **Style** > [**Fonts**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Fonts&redirect).
2. Open the **Heading font** dropdown and choose a font for all titles and section headings.
3. Open the **Base font** dropdown and choose a font for body text, product descriptions, and other non-heading content.
4. Optionally, enable **Display text in all uppercase** under either font section to force that font to render in capitals.
5. Click **Save**.

[Image: Heading font and base font dropdown selectors in Fonts settings]

Changes apply immediately to the site preview on the right side of the screen.

## How to adjust the font size scale

The font scale lets you increase or decrease overall text size across your entire site. There are two separate scales, both ranging from 70% to 200%:

- **Heading font scale**. Controls the size of headings and titles.
- **Body font scale**. Controls body text such as product descriptions and paragraph text.

1. Go to **Site Design** > **Style** > [**Fonts**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Fonts&redirect).
2. Move each slider to increase or decrease the text size for headings and body text independently.
3. Preview the result in real time before saving.
4. Click **Save**.

[Video: Font size scaling]

## How to override font size for a specific section

You can override the font size for a single section without affecting the rest of your site. This is useful when one section needs larger or smaller text than your global scale.

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

The section override applies only to that section. All other sections keep the store-wide font scale.

## How to add a custom font

If the font you want is NOT available in the built-in dropdown, you can add it manually using the custom head code feature. This requires hosting your font file on a Content Delivery Network (CDN) and injecting a CSS `@font-face` declaration.

**Step 1: Host your font on a CDN.** Upload your font file (`.woff2` format recommended) to a CDN. [Cloudflare](https://www.cloudflare.com/) offers a free plan and straightforward setup.

**Step 2: Open the custom head code editor.** In your Fourthwall dashboard, go to **Site Design** > **Style** > [**Edit HTML code**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=advanced&redirect). Enable **Header code** to open the custom code box.

[Image: Style panel with arrow pointing to Edit HTML Code option]

[Image: Custom code editor with Enable header code and Enable footer code checkboxes]

**Step 3: Paste the font injection code.** Copy the snippet below into the header code box. Replace `FONT_NAME_HERE` with your font's name and `https://FONT_URL_HERE.woff2` with the CDN URL for your font file:

```html
<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>
```

Use the appropriate CSS variable depending on which font you are overriding:

- `--font-family-heading`. Controls heading fonts (titles, section headers).
- `--font-family-base`. Controls the base font (product descriptions, body copy).

You can set both in the same `<style>` block if needed.

## Troubleshooting common font issues

**Problem:** Selected font is not displaying on the live site.
**Solution:** Confirm you clicked **Save** after selecting the font. Clear your browser cache or open the site in an incognito window to see the updated font without cached styles.

**Problem:** Custom font is not loading.
**Solution:** Confirm the CDN URL is publicly accessible and returns the font file. Open the URL directly in a browser to verify. Also confirm the font family name in the CSS exactly matches the `font-family` declaration in `@font-face`.

**Problem:** All caps setting applies to the wrong text.
**Solution:** The all uppercase toggle is per font section. Enable it under **Heading font** to uppercase headers, or under **Base font** to uppercase body text. They are controlled independently.