---
title: Typography
url: https://support.troopthemes.com/guide/blockshop/typography/
theme: Blockshop
theme_styles: Radiance, Stone, Valla
---

# Typography in Blockshop

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

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

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

## Theme settings → Typography (Blockshop)

### Fonts (Blockshop)

You pick three fonts:

- **Heading font**: banners, section titles, and other headings
- **Navigation font**: header and dropdown labels
- **Paragraph font**: body copy

Use one heading font and one body font. Navigation can match headings or paragraphs. Mixing three unrelated families makes the store feel busy.

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

### Type roles (Blockshop)

Each role has a desktop size. Most also have a **Mobile size** so heroes do not overflow phones.

- **Banner heading**: slideshow and large hero titles
- **Featured heading**: campaign titles that sit below banner size
- **Section heading**: titles at the top of a section
- **Block heading**: titles on cards, columns, and blocks
- **Navigation**: header links
- **Sub navigation**: dropdown and nested links
- **Buttons**: button labels
- **Overline**: small labels above a heading
- **Paragraphs**: body copy
- **Paragraphs** → **Featured size**: body copy on top of images and video

Keep the ladder obvious: banner larger than featured, featured larger than section, section larger than block, block close to paragraph. If section headings and paragraphs are the same size, the page has no hierarchy.

> **Check mobile**
>
> After you set banner and featured sizes, resize the editor preview to mobile. If a title wraps into five lines, lower **Mobile size** rather than shrinking desktop type.

### Letter spacing and uppercase (Blockshop)

- **Heading letter spacing** and **Paragraph** / **Button letter spacing** open or tighten the letters.
- **Uppercase headings**, **Uppercase** on nav, buttons, overlines, and paragraphs change the voice of the brand.

Treat uppercase and wide tracking as a brand choice, not a default on every role. All-caps paragraphs are hard to read. Wide tracking on a huge banner can look elegant; the same tracking on body copy looks sparse.

### Links and buttons in type (Blockshop)

Blockshop adds type controls that sit with buttons:

- **Link style**: Underline or Arrow on text links
- **Match link size to block heading**: text links use the block heading size
- **Buttons → Size** and **Mobile size**: button label size on desktop and phones

Set link style here so it stays consistent storewide. Colors and hover for the four button styles live in [Buttons, inputs, and links](https://support.troopthemes.com/guide/blockshop/buttons-inputs-and-links/).

### Text on images (Blockshop)

Under **Text visibility**:

- **Image darkness**: storewide strength (0–100%) for dark overlays on photos and video
    - **On the section**: **Image darkness** (or **Image overlay** on some sections) turns the overlay on and picks the direction: **Darken entire image**, **Darken top down**, or **Darken bottom up**. **None** on the section means this Typography slider has no effect there.
- **Text shadows**: storewide strength for **Oval shadow**
    - **On the section**: **Text shadows** picks **None**, **Text shadow** (fixed glow on headings, copy, and buttons), or **Oval shadow** (soft gradient behind the text; the Typography slider controls how strong)
- **Translucent box around text**: softens the fill when **Text background color** is set (not Transparent)
    - **Sections**: Slideshow, Image with text overlay, Video, Featured images, Testimonials, Image with text (overlap layout)
    - **Blocks**: Grid with overlay tiles; Promotion blocks in Featured collection and Collection grid; megamenu blocks in Header

If overlay headings disappear on a pale photo, set the section's **Image darkness** to a darken option first, then raise **Image darkness** in Typography, or set **Text shadows** to **Text shadow** or **Oval shadow**.

## Custom fonts (Blockshop)

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

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

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

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

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

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

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 modern retail store, 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/blockshop/sidekick--theme-editor.png)

## Troubleshooting (Blockshop)

- **Headings didn’t change**: you may have edited the wrong role. Banner headings only affect slideshows and large heroes; section titles use **Section heading**.
- **Product card titles didn’t change**: those sizes are **Heading type** in **Theme settings** → **Product grid**, not Typography.
- **A sentence in the header or cart is the wrong words**: that is [default theme content](https://support.troopthemes.com/guide/blockshop/change-default-text/), not a font setting.
- **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.