Max IT solutionsShopify App Store

How to Change Fonts on Shopify and Pick Readable Ones

Updated , first published · 4 min read

To change fonts on Shopify, open the theme editor, go to Theme settings > Typography, and click Change under Headings or Body. Which fonts you can pick depends on your theme’s developer; all free Shopify themes use Shopify’s font library, a collection that includes system fonts and a selection of Google fonts. A brand font outside the library needs an upload and a few lines of CSS.

Change fonts in the theme editor

The steps follow Shopify’s Help Center page on theme settings, read on October 23, 2026. Duplicate the theme first, so you can compare the two and go back.

  1. In the admin go to Online Store, find the theme and click Edit theme.
  2. Click the Theme settings icon, then Typography.
  3. Under Headings or Body, click Change.
  4. Click the font name, then Select.
  5. Click Save.

The Font size scale sliders for headings and body run from 100% to 150% in steps of 5%, with 100% as the default. On the phone, the same path exists in the Shopify app: Sales channels > Online Store > Manage all themes > Edit theme > Theme settings > Typography. Custom CSS in the theme settings applies to every page except checkout, so a font you set through CSS will not reach the checkout either.

Choose fonts that read well

Shopify’s accessibility guidance is specific enough to use as a checklist:

  • Body text at a minimum size equivalent to 16 px. Fonts differ in apparent size, so if yours looks small at 16 px, use a larger size.
  • Left-aligned text. Shopify advises against justified text, which creates uneven spacing between words.
  • Contrast of at least 4.5:1 for body and button text, and 3:1 for headings and other large text (24 px and up). Text over images needs the same ratios.
  • Links that differ from the surrounding text by more than color, for example an underline.
  • Headings in order from 1 to 6, without skipped levels.

Beyond those rules, a workable pairing is one family for headings and one for body text. Two patterns cover most stores: a serif or a display face for headings with a plain sans-serif for body text, or one sans-serif family for both, with headings set heavier. Test the body font at 16 px on a phone with a real product description, not with the theme’s demo text.

Check the character set if you sell in more than one language. Shopify’s developer docs say most library fonts include Basic Latin, Latin-1 Supplement, Latin Extended-A and currency symbols. That covers English, German, French, Spanish and Polish letters, but not Cyrillic or Greek; for those, Shopify points to system fonts or another font service. A font that lacks a character falls back to a different font for that letter, which looks out of place in the word.

Weights matter as well. Bold and italic are variants of the same family, which themes load through Liquid’s font_modify filter, and every variant the theme uses is more font data for the browser to fetch. A theme that sets headings in a bold weight of one family and body text in the regular and italic of another uses at least three files. Shopify reminds you that following the guidelines does not guarantee a fully accessible store. Brand identity beyond type is in logo design for non-designers.

Adding a custom brand font

Shopify’s font library cannot include every font because of licensing restrictions, so a brand font may need to come from outside. Check that your license covers web use before you upload anything. Then the developer docs describe two routes:

  1. Through the admin: upload the font files to Content > Files, then create an @font-face CSS rule that references the file with file_url. Uploading some font types through the admin code editor to the assets folder can corrupt the file, so use Files.
  2. In theme code: if you push the theme with Shopify CLI, a ZIP upload or the GitHub integration, store the font in the theme’s assets folder and reference it with asset_url.

Shopify serves library fonts in WOFF and WOFF2 formats. A custom font will not appear in the font picker unless the theme has a font setting for it, which a developer adds. Without one, you apply the font through CSS to chosen elements. If this is more code than you want, see customizing Shopify without code.

Every extra font is a file the browser must download before it can render text. System fonts avoid that, and Shopify suggests considering them for speed, with the trade-off that the font shown depends on the visitor’s operating system. More on speed in speed optimization tools, and other running-a-store guides in the hub.

Frequently asked questions

Can I use Google Fonts on Shopify? Shopify’s font library includes a selection of Google fonts, which you can pick in the theme editor if your theme offers them.

Do custom fonts slow down my store? Every font is a separate resource that the browser downloads before it renders text, and system fonts skip that download. Keep to two families and few weights.

Why doesn’t my font show on mobile? Check four things in order. Is the font saved in the theme settings, or only previewed? Does your @font-face rule point to the right file_url, and does it include the weight and style the mobile layout uses? Does your CSS rule sit inside a desktop-only media query? And if you picked a system font, remember that each operating system shows its own version.