Skip to main content

Typography

Typography​

Configure fonts, sizes, spacing, and text styles across your store. These settings are found under Theme Settings → Typography in the Theme Editor.

The Wonder Theme supports separate font settings for five text categories: body, headings, navigation, buttons, and prices.

Font Categories​

Each font category has its own set of controls:

Body Font​

  • Font — Choose a font from the Shopify font library.
  • Uppercase — Transform body text to uppercase.
  • Letter spacing — Adjust spacing between characters (−3 to 5px).
  • Line height — Adjust the line height (1.0 to 2.0).

Headings Font​

  • Font — Choose a font for all headings.
  • Uppercase — Transform headings to uppercase.
  • Letter spacing — Adjust spacing between characters (−3 to 5px).
  • Line height — Adjust the line height (1.0 to 2.0).
  • Font — Choose a font for navigation menus.
  • Uppercase — Transform navigation text to uppercase.
  • Letter spacing — Adjust spacing between characters (−3 to 5px).

Button Font​

  • Font — Choose a font for buttons.
  • Uppercase — Transform button text to uppercase.
  • Letter spacing — Adjust spacing between characters (−3 to 5px).

Price Font​

  • Font — Choose a font for product prices.
  • Uppercase — Transform price text to uppercase.
  • Letter spacing — Adjust spacing between characters (−3 to 5px).

Font Sizes — Mobile​

Control font sizes on mobile devices:

  • Breadcrumbs — 12–18px (default: 14px)
  • Body — 12–18px (default: 14px)
  • Headings — 12–40px (default: 20px)
  • Navigation — 12–18px (default: 16px)
  • Buttons — 12–18px (default: 14px)

Font Sizes — Desktop​

Control font sizes on large screens:

  • Breadcrumbs — 12–22px (default: 16px)
  • Body — 12–22px (default: 16px)
  • Headings — 16–60px (default: 26px)
  • Navigation — 12–22px (default: 17px)
  • Buttons — 12–22px (default: 16px)

Custom Fonts​

If you need fonts not available in the Shopify font library, you can load custom fonts using @font-face declarations. The theme provides fields for each font category:

  • @font-face declarations — Paste your @font-face CSS/Liquid code here.
  • Body font name / weight — Enter the custom font family name and weight for body text.
  • Heading font name / weight — Enter the custom font family name and weight for headings.
  • Navigation font name / weight — Enter the custom font family name and weight for navigation.
  • Button font name / weight — Enter the custom font family name and weight for buttons.
  • Price font name / weight — Enter the custom font family name and weight for prices.

For a detailed step-by-step guide on setting up custom fonts, see Custom Fonts.