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.

Typography shapes how your brand feels before a visitor reads a single word. Updating fonts in Shopify is straightforward for the standard library - and possible but more involved for custom typefaces.

Why you can trust us

Jacques has 15+ years of Shopify development experience. We built Fudge — an AI storefront editor used by hundreds of Shopify stores, with a 5.0 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.

What fonts does Shopify offer?

Shopify’s built-in font library includes:

• Google Fonts - the full collection of open-source typefaces from Google, including popular choices like 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
• Shopify curated fonts - a selection Shopify highlights for e-commerce use

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.

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;
}

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 → Actions → Edit code.

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

Step 4. Open assets/base.css (or your theme’s main CSS file) and add a @font-face declaration:

@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;
}

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:

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