How to Change Font in Shopify (Theme Editor + CSS)

Typography shapes how customers perceive your brand. If your current font feels off-brand or difficult to read, Shopify offers several ways to customise it. In this guide, NextSky explains how to change font colour in Shopify theme using the Theme Editor, add Google Fonts, upload custom typefaces, and apply CSS.

What to know before you start

A quick note on terminology: in Shopify, "font" refers to the typeface (e.g., Inter, Playfair Display, Helvetica), the shape and style of the letterforms. This is separate from font colour and font size, both of which are configured in different parts of the Theme Editor.

Shopify's font library includes:

System fonts: Already installed on users' devices; fastest to load
Google Fonts: A large selection of free, web-optimized typefaces
Licensed fonts from Monotype: Premium options included in Shopify's library

For fonts not in this library (brand-specific typefaces, purchased fonts), you'll need to upload them manually via the code editor.

Change font through the Theme Editor (no code required)

This is the fastest route and works on all modern Shopify themes, including Dawn, Sense, Craft, Ride, and Crave.

Step 1. From your Shopify admin, go to Online Store > Themes.
Step 2. Click Customize on your active theme.
Step 3. In the left sidebar, click the Theme settings icon (it looks like a paintbrush or sliders icon, depending on your theme).
Step 4. Select Typography.
Step 5. You'll see two sections: Headings and Body text. Click Change under whichever you want to update.
Step 6. A font picker will open. Browse or search by name. Click the font you want, then click Select.
Step 7. Optionally adjust font size and font weight if your theme exposes those controls.
Step 8. Click Save and preview your store.

Tip: Before settling on a font, preview it at multiple sizes. A font that looks elegant at 48px for headings might be difficult to read at 14px for body text. Always test on mobile too, font rendering can differ significantly between devices.

Add a Google Font via CSS

If the font you want appears in Google Fonts but isn't available in Shopify's font picker, you can add it manually. This method gives you access to thousands of typefaces at no cost.

Before editing any code: Always duplicate your theme first. Go to Online Store > Themes > ⋯ (three dots) > Duplicate. This creates a backup you can restore if anything goes wrong.

Step 1. Get your font link from Google Fonts

Go to fonts.google.com
Find the font you want and click on it
Select the styles you need (e.g., Regular 400, Bold 700)
Click the Get font button, then Get embed code

Copy the tag — it looks like this:

Step 2. Add the font link to your theme layout

In your Shopify admin, go to Online Store > Themes > ⋯ > Edit code.
Open Layout > theme.liquid.

Find the closing tag. Paste the Google Fonts code directly above .

Click Save.

Step 3. Apply the font in CSS

Still in the code editor, open Assets > base.css (or your theme's main stylesheet, it may be named theme.scss.liquid or styles.css)
Scroll to the bottom and add:

body {

font-family: 'Inter', sans-serif;

}

h1, h2, h3 {

font-family: 'Inter', sans-serif;

font-weight: 700;

}

Click Save and preview your store.

Performance note: Shopify's built-in font library already self-hosts Google Fonts via its CDN, which is faster than loading them from Google's servers directly. If page speed matters to you and it should, given Google's Core Web Vitals, consider using Method 1 first to check if your preferred font is already in Shopify's library.

Upload a custom font file

If you're using a proprietary brand font or a typeface purchased from a foundry, you'll need to upload the font file directly to your theme. Supported file formats: .woff2 (preferred), .woff, .ttf, .otf

Step 1. Upload the font file

In your Shopify admin, go to Content > Files (not the theme code editor — uploading fonts through the Assets folder can corrupt files)
Click Upload files and select your font file(s)
Once uploaded, click the font file's URL to copy it — you'll need this in Step 3

Step 2. Open the theme code editor

Go to Online Store > Themes > ⋯ > Edit code

Step 3. Add an @font-face rule in your CSS

Open Assets > base.css and add this at the top or bottom of the file:

@font-face {

font-family: 'YourFontName';

src: url('PASTE_YOUR_FILE_URL_HERE') format('woff2');

font-weight: normal;

font-style: normal;

}

Replace YourFontName with whatever name you want to call the font, and paste the file URL from Step 1.

If you have multiple weights (e.g., regular and bold), add a separate @font-face block for each, changing the font-weight value accordingly.

Step 4: Apply the font to your store

Add a CSS rule below your @font-face declaration:

body {

font-family: 'YourFontName', sans-serif;

}

Click Save and preview your store across desktop and mobile to confirm the font is rendering correctly.

How to change font for a specific section or element

You don't have to apply font changes globally. If you only want to change the font on product titles, announcement bars, or navigation links, use CSS selectors to target those elements specifically.

How to find the right CSS selector:

Open your store in a browser and right-click the element you want to change
Select Inspect (or "Inspect Element")
Look at the class names in the HTML panel — they'll look like .product__title or .announcement-bar__message
Use those class names in your CSS rule

Example:

/* Change font on product titles only */

.product__title {

font-family: 'YourFontName', serif;

}

/* Change navigation font */

.header__menu-item {

font-family: 'YourFontName', sans-serif;

}

Add these rules to your base.css or a dedicated custom.css file in the Assets folder.

Choosing the right font for your Shopify store

Not all fonts work equally well in ecommerce. Here are a few practical guidelines:

Readability first: Body text is read at small sizes on mobile screens. Stick to fonts with clear letterforms and good spacing. Geometric sans-serifs (like Inter, DM Sans, or Outfit) and humanist serifs (like Lora or Libre Baskerville) tend to perform well.
Limit font pairings: Two fonts, one for headings, one for body is almost always enough. Adding a third increases visual noise and slows page load.
Watch your font weights: Loading too many font weight variants (light, regular, medium, semibold, bold, extrabold) can significantly slow your store. Stick to 2–3 weights per family: Regular (400) and Bold (700) cover the vast majority of use cases.
Test on mobile: Font size, weight, and line-height behave differently on small screens. Check legibility on both iOS and Android before publishing changes.
Consider system fonts for performance: System fonts like -apple-system, Segoe UI, Roboto are already installed on most devices, so they load instantly with zero network requests. For stores where speed is a top priority, a well-chosen system font stack often outperforms a custom web font.

General