Fonts
Easily control your shop’s typography with global font, weight, and text style settings for body text, buttons, captions, and headings, plus support for custom and hosted fonts to match your brand and improve readability.
Last updated 4 months ago
Overview
The Fonts settings control all typography across your storefront — ensuring a unified, accessible, and on-brand visual experience.
Adjusting these options updates text globally, while section-level overrides remain available for specific cases.
⚠️ Important: Typography consistency builds trust and readability. Review your font choices regularly to maintain design harmony.
Global font settings
These are the foundational font groups that define how text appears across your store.
Each group includes the same controls described below.
Font family
Choose the typeface that best reflects your brand.
All standard Shopify fonts and custom fonts (Google, Adobe, or self-hosted) are supported.
Text transform
Control capitalization for any font group:
None — Default: none
Capitalize — Capitalizes each word’s first letter
Uppercase — Converts all text to uppercase
Lowercase — Converts all text to lowercase
Full width — Adds wide spacing between characters
Font size
Set the font size (in pixels).
Use slightly larger sizes for headings and buttons, and smaller ones for captions or badges.
Letter spacing
Adjust spacing (in %) to fine-tune the space between letters.
Increased spacing can improve legibility for uppercase or smaller text.
💡 Tip: Font, transform, size, and spacing behave the same way for all groups — once you know how one works, you can confidently style the rest.
Body font
The Body font defines the primary text used throughout your store — including paragraphs, product descriptions, and general content.
This setting ensures your everyday text remains readable and cohesive across all sections.
💡 Tip: Choose a body font that’s highly legible at smaller sizes to maintain clarity and comfort for long-form reading.
Button font
The Button font determines the typography used for all interactive buttons across your storefront.
It helps calls-to-action stand out clearly while remaining consistent with your overall design language.
💡 Tip: Select a bold, well-balanced font for buttons to create strong visual hierarchy and improve click visibility.
Caption font
The Caption font styles small, secondary text such as image captions, labels, or fine print details.
This helps differentiate supporting information from main content without distracting from the layout.
💡 Tip: Use a subtle or monospaced font to give captions a distinct yet unobtrusive look that complements your brand tone.
Badge fonts
The Badge fonts control the appearance of small labels that highlight product statuses such as “New,” “Sale,” or “Bestseller.”
These settings help badges remain consistent, legible, and visually distinct across your storefront.
💡 Tip: Use consistent badge typography for quick visual recognition while maintaining a clean and premium layout.
Price fonts
The Price fonts define how product prices appear across your store — including product cards, product pages, and cart interfaces.
A well-chosen price font improves clarity and reinforces trust during the shopping process.
📝 Note: Clear, well-spaced pricing supports better legibility and helps shoppers quickly identify product costs at a glance.
Navigation fonts
The Navigation fonts define typography for menu items and header navigation links throughout your store.
Readable, consistent navigation typography enhances usability and strengthens brand presence.
💡 Tip: Keep navigation text bold, evenly spaced, and compact to ensure effortless browsing on all devices.
Heading font settings
Define a single font and text transform for all headings (H1–H6) to keep your site’s hierarchy consistent. Then fine-tune how headings look wherever they appear by choosing a size preset and adjusting its typography.
How it works
One font for all headings — choose the family used by H1–H6.
One text transform for all headings — None / Capitalize / Uppercase / Lowercase / Full width.
Per-size controls — for each preset you can set font size and letter spacing.
Available size presets
Extra small
Small
Medium
Large
Extra large
Jumbo
📝 Note: Sections that use “Heading” let you pick any of the presets above. Changing a preset in Fonts → Heading fonts updates every place that preset is used.
Custom font service
Easily embed fonts from web services by pasting provider code. This expands font options far beyond standard web-safe fonts.
Paste integration code from providers such as Google Fonts and Adobe Fonts for broader creative freedom and brand alignment.
Custom hosted fonts
For more direct control, custom hosted fonts let you manage and host your own font files, which is useful for licensing and performance.
Input the font family name just as it appears in CSS.
Provide direct URLs for .woff and .woff2 formats to guarantee compatibility and efficient loading.
Both formats are recommended for maximum performance and browser support.
💡 Tip: Hosting your own font files can optimize load times and avoid third-party reliance, but requires proper licensing.
Custom font settings by element
The custom font settings by element feature enables advanced configuration of family, weight, and style for each major text type individually (body, button, caption, card heading, h1–h6).
For every category:
Enter the desired custom font family for that text group.
Specify a font weight between 100 and 800 (increments of 100).
Default: 400Select the preferred font style:
Regular — Default: regular
Italic
These advanced adjustments let you maintain brand clarity alongside optimal readability.
Usage notes
Always use a fallback font after your chosen custom font to provide resilience if the font fails to load.
Test font selections on various devices and browsers to ensure consistency across your storefront.
Avoid excessive font families to boost performance and maintain design harmony.
Safeguard contrast and font size — critical for both accessibility and user experience.
Confirm that self-hosted and third-party fonts are correctly licensed for site use.
💡 Tip: Refining typography in Fonts settings helps express your brand clearly, fosters trust, and creates a seamless experience for all visitors.
Adopting these controls in Fonts ensures that your storefront remains visually unified, accessible, and authentic to your brand’s personality — every step of the way.