---
title: Typography
url: https://support.troopthemes.com/guide/emerge/typography/
theme: Emerge
theme_styles: Cafe, Elements
---

# Typography in Emerge

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

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

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

## Theme settings → Typography (Emerge)

### Fonts (Emerge)

- **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](#custom-fonts).

### Type roles (Emerge)

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 (Emerge)

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 (Emerge)

**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 (Emerge)

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 (Emerge)

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.


![Adding a Custom liquid section to the header group in Emerge](https://support.troopthemes.com/_images/add-custom-font-1.gif)

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

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

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 (Emerge)

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 (Emerge)

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 (Emerge)

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"> (Emerge)

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

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

## Troubleshooting (Emerge)

- **Headings collide with a wave**: lower **Mobile size**, or put the shape on the *other* section’s edge. See [Section shapes](https://support.troopthemes.com/guide/emerge/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](https://support.troopthemes.com/guide/emerge/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.