Typography in Emerge

Edit theme → Theme settings → Typography

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

Theme settings → Typography

Fonts

• Heading font
• Navigation font
• Paragraph font

One heading family and one body family is enough. Cafe-style listings often pair a display heading with a quiet paragraph font; keep navigation with one of those two.

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 have desktop and Mobile size.

• Banner heading: slideshow and hero titles
• Featured heading: large titles below banner size
• Section heading: section titles
• Block heading: card and column titles
• Navigation / Sub navigation: header and dropdowns
• Buttons: button labels
• Overline: small labels above a heading
• Paragraphs: body copy
• Paragraphs → Featured size: copy on media

Keep banner > featured > section > block. Featured size is for paragraph text on images; it can match or sit slightly below paragraph size so overlay copy does not compete with the heading.

Check mobile

Waves take vertical space on a phone. If a banner plus a top shape plus a large mobile title collides, lower Mobile size before you turn the shape off.

Letter spacing and uppercase

Use uppercase and tracking on overlines, nav, or buttons if the listing you installed already does. Avoid uppercase paragraphs. If a wave shape sits under a heading, extra letter-spacing can help the title feel as considered as the shape.

Text on images

Image darkness, Text shadows, and Translucent box around text protect overlay type. Shapes use their own color; they do not replace these controls.

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.

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 a laid-back, cafe-style 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.

Troubleshooting

• Headings collide with a wave: lower Mobile size, or put the shape on the other section’s edge. See Section shapes.
• Overlay type is not readable: raise Image darkness. Shape color does not darken the photo.
• 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.