How to Update Fonts in Shopify (2026)

Key takeaways

• Shopify fonts are changed in the Theme Editor under Theme settings → Typography.
• Shopify offers a curated font library including Google Fonts and system fonts.
• Custom brand fonts (e.g., purchased typefaces) require uploading the font files to your theme’s assets folder and adding CSS.
• Fudge can implement custom fonts across your theme without you writing the CSS.

To update fonts in Shopify, go to Online Store → Themes → Customize → Theme settings → Typography and pick new heading and body fonts. A purchased brand font needs its files uploaded to the theme and a short @font-face rule.

Why you can trust us

Jacques has 15+ years of Shopify development experience. We build Fudge, the AI operator for Shopify stores, with a 4.9 rating on the Shopify App Store.

How to change fonts in Shopify

Step 1. Go to Online Store → Themes → Customize.

Step 2. In the left sidebar, scroll to the bottom and click Theme settings.

Step 3. Click Typography (some themes label this “Fonts”).

Step 4. You’ll see font pickers for different text roles - typically:

• Headings font - used for H1, H2, H3
• Body font - used for paragraphs, labels, and general text

Step 5. Click Change next to each font role. A font picker opens with Shopify’s curated library.

Step 6. Browse or search for a font. Click one to preview it. When you’re happy, click Select.

Step 7. Save.

The font change applies across all pages that use your theme’s standard heading and body styles.

For heading sizes, see How to Change Heading Font Size in Shopify.

What fonts does Shopify offer?

Shopify’s built-in font library includes:

• Google Fonts - a large selection of Google’s open-source typefaces, including Inter, Poppins, Playfair Display and DM Sans
• System fonts - OS-native fonts like -apple-system, Arial, and Georgia that load instantly without any external request
• Licensed fonts - commercial typefaces Shopify licenses for use in themes

You can search by name in the font picker. If a Google Font isn’t in the dropdown, it may not be included in Shopify’s hosted library - check by name.

If you are still deciding rather than applying, our free AI Shopify store builder suggests a typography pairing alongside a color palette and homepage design for whatever you sell.

How can I change the font style?

Font size and font weight (bold, regular, light) are typically set separately from the font family. Look in Theme settings → Typography for size controls. Some themes expose heading size as “Large”, “Medium”, “Small” options; others give pixel values.

For fine-grained control over font weight and size across specific elements, custom CSS is needed. Add it in Theme settings → Custom CSS:

h1,
h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

p {
    font-size: 16px;
    line-height: 1.6;
}

For colors and fonts together, see How to Update Colors and Fonts in Shopify.

How to add a custom font to Shopify

If your brand uses a typeface that isn’t in Shopify’s library - a purchased font like GT Walsheim, Canela, or Neue Haas Grotesk - the process involves uploading font files and writing CSS.

Step 1. Obtain the web font files for your typeface. You need .woff2 format (preferred) and .woff as a fallback. Your font license must permit web use.

Step 2. Go to Online Store → Themes, then the three-dot menu (…) next to your theme, then Edit code.

Step 3. Under the Assets folder, click Add a new asset → upload your .woff2 and .woff files.

Step 4. Open layout/theme.liquid and add the @font-face rule inside a <style> tag in <head>. Liquid runs in this file, so the asset_url filter returns each font file’s real URL (it isn’t processed in a plain .css file):

<style>
    @font-face {
        font-family: 'YourFontName';
        src:
            url('{{ "your-font.woff2" | asset_url }}') format('woff2'),
            url('{{ "your-font.woff" | asset_url }}') format('woff');
        font-weight: 400;
        font-display: swap;
    }
</style>

Step 5. Apply the font to your elements:

body {
    font-family: 'YourFontName', sans-serif;
}

This process requires some comfort with CSS. Mistakes won’t break your store, but the font won’t display until the code is correct.

Using Fudge to implement custom fonts

If you want to use a custom typeface without touching code, describe it to Fudge, the AI operator for Shopify stores:

“Implement our brand font GT Walsheim across headings and use Inter for body text. The font files are in our assets folder.”

Fudge writes the @font-face declarations and CSS assignments as a draft for your review, so you can see the new type on your real pages first. Nothing goes live until you approve it.

Font performance considerations

Fonts affect page load speed. A few things to keep in mind:

Limit font families. Every distinct font family loads a separate file. Two families (one for headings, one for body) is usually the right balance.

Use font-display: swap. This tells the browser to show text in a system font while the custom font loads, rather than hiding text entirely. Shopify’s built-in fonts handle this automatically. For custom fonts, add it to your @font-face declaration as shown above.

Prefer variable fonts. Variable fonts pack multiple weights into a single file. If your typeface offers a variable font version, use it.

For the rest of your page speed, see How to Speed Up a Shopify Theme.

FAQ