Typography in Blockshop

Edit theme → Theme settings → Typography

Blockshop Typography in Theme settings

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

Theme settings → Typography

Fonts

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.

Type roles

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

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

Text on images

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

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:

Upload a font file in Content → Files
Use a public URL to a hosted font file (for example, .woff2, .woff, .ttf, or .otf)
Use a font from Google Fonts

Set up a Custom liquid section

In Edit theme, add a Custom liquid section at the top of the header group.
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

In the Shopify admin, open Content → Files and use Upload files to add your font (for example, custom-font.woff2).
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 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

Troubleshooting

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