Skip to content

Typography in Beyond

Edit theme → Theme settings → Typography

Beyond Typography in Theme settings

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

Theme settings → Typography

Fonts

  • 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.

Type roles

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

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

Text on images

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

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

Set up a Custom liquid section

  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

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

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

On Google Fonts, 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

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

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

Open 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

Troubleshooting

  • Brand statement looks huge: lower Featured heading or Section heading, not the section’s padding. See 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.
  • 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 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.