---
title: Typography
url: https://support.troopthemes.com/guide/beyond/typography/
theme: Beyond
theme_styles: Fleur
---

# Typography in Beyond

**Edit theme** → **Theme settings** → **Typography**

![Beyond Typography in Theme settings](https://support.troopthemes.com/_images/beyond/typography--settings.jpg)

Heading, navigation, and body fonts, plus a type size ladder for each role.

## Theme settings → Typography (Beyond)

### Fonts (Beyond)

- **Heading font**
- **Navigation font**
- **Paragraph font**

Fleur-style listings often use a distinctive heading face with a simple paragraph font. Keep navigation with one of the two. Three competing families make story pages appear cluttered.

> **A custom font**
>
> To use a font file or a Google Font that the picker does not include, see [Custom fonts](#custom-fonts).

### Type roles (Beyond)

Banner, featured, section, and block headings include **Mobile size**.

- **Banner heading**: slideshow and hero titles
- **Featured heading**: large titles, useful on Brand statement
- **Section heading**: section titles
- **Block heading**: card titles and About us block titles
- **Navigation** / **Sub navigation**: header and dropdowns
- **Buttons**: button labels
- **Overline**: small labels (“Our brand”, “The studio”)
- **Paragraphs**: body copy
- **Paragraphs** → **Featured size**: copy on media

Overlines are how Beyond story sections label a thought without another huge heading. Keep overline size small and, if you use uppercase, keep it there, not on paragraphs.

> **Check mobile**
>
> Brand statement headings are often long. Set **Mobile size** so a manifesto line does not fill the screen before the products appear.

### Letter spacing and uppercase (Beyond)

A little heading tracking fits editorial Beyond/Fleur layouts. Wide tracking on paragraphs hurts reading length on About pages.

### Text on images (Beyond)

**Image darkness**, **Text shadows**, and **Translucent box around text** protect overlay type on banners. About us blocks can mix media and copy; darkness still applies when text sits on the image.

## Custom fonts (Beyond)

Shopify’s font picker in **Theme settings** → **Typography** covers most stores. Add a custom font only when you need a licensed font file or a Google Font that the picker does not include. You must have a license to host the font files. Custom fonts do not change checkout.

A custom font loads from a **Custom liquid** section at the top of the header group. You can load the font in one of three ways:

1. Upload a font file in **Content** → **Files**
2. Use a public URL to a hosted font file (for example, `.woff2`, `.woff`, `.ttf`, or `.otf`)
3. Use a font from [Google Fonts](https://fonts.google.com/)

### Set up a Custom liquid section (Beyond)

1. In **Edit theme**, add a **Custom liquid** section at the top of the header group.
2. In that section’s settings, set **Spacing above**, **Spacing below**, and the mobile spacing options to **None** so the section does not add extra space.


Each option below pastes its font code into this **Custom liquid** section.

### Option 1: Upload a font file (Beyond)

1. In the Shopify admin, open **Content** → **Files** and use **Upload files** to add your font (for example, `custom-font.woff2`).
2. Note the uploaded file name, including the file extension. You use that exact name in the next step.


In the **Custom liquid** section, paste the following code. Set `custom_font_family` to your font’s name, and set `custom_font_file` to the uploaded file name (for example, `my-font.woff2`).

```liquid
{%- liquid
  assign custom_font_family = 'Merchant Custom Sans'
  assign custom_font_fallback = 'sans-serif'
  assign custom_font_file = 'custom-font.woff2'
-%}

<style>
  @font-face {
    font-family: {{ custom_font_family }};
    src: url('{{ custom_font_file | file_url }}') format('{{ custom_font_file | split: "." | last | downcase }}');
    font-display: swap;
  }

  :root {
    --font--heading--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--nav--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--paragraph--family: {{ custom_font_family }}, {{ custom_font_fallback }};
  }
</style>
```

Click **Save** in the theme editor to apply the changes.

### Option 2: Use a URL to a hosted font (Beyond)

Use this option when the font file is on a server or CDN and you have a direct `https://` link to the file.

In the **Custom liquid** section, paste the following code. Set `custom_font_family` to your font’s name, and set `custom_font_url` to the full address of the file (for example, `https://example.com/fonts/custom-font.woff2`).

```liquid
{%- liquid
  assign custom_font_family = 'Merchant Custom Sans'
  assign custom_font_fallback = 'sans-serif'
  assign custom_font_url = 'https://example.com/fonts/custom-font.woff2'
-%}

<style>
  @font-face {
    font-family: {{ custom_font_family }};
    src: url('{{ custom_font_url }}') format('{{ custom_font_url | split: "?" | first | split: "/" | last | split: "." | last | downcase }}');
    font-display: swap;
  }

  :root {
    --font--heading--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--nav--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--paragraph--family: {{ custom_font_family }}, {{ custom_font_fallback }};
  }
</style>
```

Click **Save** in the theme editor to apply the changes.

### Option 3: Use Google Fonts (Beyond)

On [Google Fonts](https://fonts.google.com/), pick a font, open **Get embed code**, and copy the stylesheet link. The link has the format `https://fonts.googleapis.com/css2?family=...&display=swap`.

![Copying the embed code from Google Fonts](https://support.troopthemes.com/_images/add-custom-font-3.gif)

In the **Custom liquid** section, paste the following code. Set `custom_font_url` to the stylesheet link, and set `custom_font_family` to the font’s name as Google Fonts shows it. The example uses the font Oi.

```liquid
{%- liquid
  assign custom_font_family = 'Oi'
  assign custom_font_fallback = 'sans-serif'
  assign custom_font_url = 'https://fonts.googleapis.com/css2?family=Oi&display=swap'
-%}

<style>
  @import url('{{ custom_font_url }}');
  :root {
    --font--heading--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--nav--family: {{ custom_font_family }}, {{ custom_font_fallback }};
    --font--paragraph--family: {{ custom_font_family }}, {{ custom_font_fallback }};
  }
</style>
```

Click **Save** in the theme editor to apply the changes.

### Deprecated fonts in Shopify’s library (Beyond)

Shopify sometimes deprecates fonts in its font library. A deprecated font can disappear from the font picker in **Theme settings** → **Typography** or stop loading as before. See [Deprecated fonts](https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#deprecated-fonts) in Shopify’s font documentation for the affected typefaces.

To replace a deprecated font, pick another font from the current library in **Theme settings** → **Typography**. To keep the same typeface, load it as a custom font with one of the options above.

## Ask Sidekick <img src="/_images/sidekick-icon.png" alt="" class="sidekick-icon"> (Beyond)

Open [Sidekick](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/sidekick) from the theme editor toolbar (top right, next to the device preview icon), or press `⌘.` (`Ctrl+.` on Windows). Ask it for a font pairing that fits your brand.

> "Suggest a Heading font and Paragraph font pairing for an editorial, story-led brand, and whether Navigation should match the heading or the paragraph font."

It previews the pairing before you apply anything to Theme settings → Typography, faster than comparing font libraries by hand. If you're deciding whether a custom font is worth adding at all, it's also a reasonable place to ask.

![Opening Sidekick from the theme editor toolbar](https://support.troopthemes.com/_images/beyond/sidekick--theme-editor.png)

## Troubleshooting (Beyond)

- **Brand statement looks huge**: lower **Featured heading** or **Section heading**, not the section’s padding. See [Brand and story sections](https://support.troopthemes.com/guide/beyond/brand-and-story-sections/).
- **About us block titles are huge**: those use **Block heading**.
- **A manifesto fills the phone**: lower **Mobile size** on Featured or Section heading.
- **A header label is the wrong words**: [default theme content](https://support.troopthemes.com/guide/beyond/change-default-text/).
- **Custom font did nothing**: the **Custom liquid** section must be first in the header group, with all spacing set to **None**. See [Custom fonts](#custom-fonts).
- **Custom font only changed some text**: the snippet sets the heading, navigation, and paragraph font variables together. Remove the `:root` lines for the roles you do not want to change.
- **Custom font file returns a 404**: `custom_font_file` must match the file name in **Content** → **Files** exactly, including the extension.
- **Checkout font is unchanged**: this is expected. Custom fonts do not apply to checkout.