Font settings

Featured links

1. Company XYZ documentation on fonts settings
2. Company XYZ documentation on fonts settings
3. Shopify documentation on the theme editor

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

These settings control the typography used across your theme, from body copy and buttons to captions, card titles, and heading levels. Because they apply in many places at once, even a small font change can noticeably affect readability, hierarchy, and brand feel.

You can use built-in font choices for a quick setup or add custom fonts when you need a more specific visual identity. For setup details, see the font settings reference and Shopify documentation on the theme editor

Core font controls

The main controls cover the text styles most customers see repeatedly across the theme.

1. Body font sets the primary reading font used across the site, including supporting text, subheadings, and card badges. Start here first, since it has the biggest impact on comfort and clarity.
2. Button font applies to action text throughout the theme. Stronger type can make buttons feel more prominent, but decorative fonts can make short labels harder to scan.
3. Caption font is used for smaller label-style text, such as the text above section headings. This is a good place to introduce a secondary typographic accent without disrupting longer reading.
4. Text transforms for each role let you control case styling globally. These settings are useful for shaping tone, but they can also make text feel louder or denser.

Uppercase and full-width transforms work best on short labels and headings. On body text or small captions, they can reduce readability quickly.

Heading fonts

This subgroup lets you control card titles separately from heading levels H1 through H6. Use it to create a clearer visual hierarchy across pages, cards, and structured content.

1. Card heading font affects titles in repeated content such as cards and previews. Choose a font that stays readable at smaller sizes and in tighter layouts.
2. H1 font is typically the most prominent heading style, often used for page titles and major headline areas. It should feel distinctive without clashing with the rest of your typography.
3. H2 to H6 fonts help define subheadings and content structure. In most cases, keeping these levels visually related creates a cleaner result than making every level feel unique.
4. Heading text transforms can add emphasis, especially for short card titles or display-style headings. If too many heading levels use aggressive transforms, pages can start to feel visually noisy.

Tip

A simple pairing often works best: one readable body font, one contrasting heading font, and minimal use of text transforms.

Custom fonts

If the built-in choices do not match your brand, you can add fonts from a provider or use self-hosted font files. This gives you more flexibility, but it also makes accuracy more important.

1. Provider-based fonts let you load a typeface from a font service using the supplied code.
2. Hosted fonts let you use your own .woff or .woff2 files. Providing both formats can improve compatibility.
3. Hosted font naming matters because the custom font assignments later in this group depend on the exact family name you define.

For supported custom-font methods and setup details, see custom fonts.

Use only properly licensed fonts, and verify any provider code or hosted file URLs carefully. If a custom font does not load correctly, the theme may fall back to another font and create inconsistent typography.

Custom font assignments

After adding a custom font source, you can assign it to specific typography roles across the theme. Separate custom controls are available for body text, buttons, captions, card headings, and each heading level.

1. Font family should match the exact value provided by your font source. This is what connects the loaded font to the role you want to style.
2. Font weight should match the intended version of the typeface. If the weight is off, the font can appear thinner, heavier, or less polished than expected.
3. Font style lets you use regular or italic styling where appropriate. Italics can add character, but they are usually best reserved for larger or more deliberate uses.
4. Per-role custom settings make it easy to use one custom typeface selectively, such as only for H1 headings or buttons, instead of replacing every font in the theme.

A practical approach is to add one custom font first, test it in its most important role, and then expand its use only if it stays balanced across different templates and text sizes.

Usage notes

1. Start with reading text. Set the body font first, since it affects the most content and establishes the overall tone of the theme.
2. Build hierarchy deliberately. Use heading fonts and card-title styling to separate content levels clearly without making every text role compete for attention.
3. Limit case transforms. Apply uppercase, lowercase overrides, or full-width styling mainly to short text where the visual treatment still reads cleanly.
4. Test repeated content. Check fonts on cards, buttons, captions, and page titles so you catch spacing or readability issues in the places customers see most often.
5. Verify custom font setup. Confirm font-family values, source code, and hosted file URLs carefully to keep typography consistent across the theme.
6. Check form and action text in context. Make sure buttons, labels, and validation messages stay readable in empty, submitted, and error states.
7. Review content-heavy templates. Compare typography in product, cart, search, blog, and article layouts so headings and body text still feel balanced when content changes or results are limited.