How to Pick Font Pairings for a Shopify Theme Without Breaking Readability

Written by the Nitroapps Editorial Team.

The short answer for a handmade store

Use a font with character for headings and a plain, wide one for body text. Stay inside your theme's font picker where possible. Judge the pair on a product page rather than the home banner, then test accents, contrast and line length on a phone.

That's the whole method. The rest of this guide shows six pairings we would put on a shortlist for a small craft or handmade catalog, and the checks that catch problems early. We haven't run speed benchmarks on these pairs. Where a claim comes from Shopify, Google Fonts or W3C documentation, we say so.

Choosing a mood before a font

It's tempting to scroll the picker and grab whatever looks nicest. But the font you choose will also set prices and shipping notes. Looks alone won't tell you if it can handle that.

So decide on the mood first. A pottery shop might want warm, and a leather shop might want sturdy. Let that word guide the heading font. The body font only has to stay readable at small sizes.

If the brand doesn't already own a licensed typeface, we'd keep it simple. Let the headings show some character. Keep the body text plain. Two loud fonts on one page fight each other.

Six heading and body pairings worth previewing

Every font below appears in Shopify's font library as listed on shopify.dev, so most themes can load it from the theme editor without an app. The Vietnamese column reflects Google Fonts metadata for the family. It doesn't guarantee the Shopify-hosted files include those glyphs, which the accents section explains.

Fraunces with Work Sans — soft serif headings · plain sans body · suits pottery, candles and home goods · both families list a Vietnamese subset on Google Fonts.

Cormorant with Nunito Sans — elegant, thin headings · rounded, readable body · Cormorant looks fragile below large heading sizes, so keep it off buttons and prices.

Lora with Karla — bookish serif headings · compact grotesque body · good for makers who write long product stories · Karla doesn't list a Vietnamese subset.

Playfair Display with Inter — high-contrast display serif · neutral UI sans body · reads well, though many stores already use it, so it can look familiar.

Alegreya with Alegreya Sans — a matched serif and sans from one designer · lowest risk of clashing · a calm choice for paper goods and bookbinding.

Josefin Sans with Crimson Pro — geometric sans headings · classic serif body · flips the usual order for shops that want an editorial, journal-like tone.

Serif or sans on the product page?

Product pages are where a pairing gets its real test. The headings there are short, usually a product name and maybe a collection label. The body text is longer and denser, covering materials, care notes, dimensions and returns, so the body font carries most of the reading.

Our default suggestion is a serif for headings and a sans-serif for body copy, because sans body text usually holds up well at small sizes on phones. Story-heavy brands can still use a serif for body text. If you do, raise the body size by one step in the theme settings and add a little line spacing.

Preview with your longest product name and your busiest description, since those expose wrapping problems.

Prices and variant labels belong in the body font, at regular or bold weight. Thin display weights make digits hard to scan.

Accents, Vietnamese text and how many files you load

Shopify's developer docs say its library font files include Basic Latin, Latin-1 Supplement, Latin Extended-A and Currency Symbols, where the font has them. That list matters for stores selling in Vietnamese. Many Vietnamese letters, such as ạ, ế and ữ, sit in the Latin Extended Additional block. That block isn't on Shopify's list.

In other words, Google Fonts may list Vietnamese for a family while the Shopify-served file lacks some of those letters. Missing letters come from a fallback font, so one word can mix two typefaces. On a test theme, paste "Gốm thủ công, men rạn, giao hàng toàn quốc" into a product description and zoom in.

If letters do fall back, load the Google-hosted font with its Vietnamese subset through custom code or an app, or switch to a family with wider coverage. Be Vietnam Pro, for example, lists a Vietnamese subset on Google Fonts.

File weight is the other cost. Shopify's docs note that fonts are a separate download before text renders, and that system fonts avoid that download. Each weight and style is usually its own file. A pairing that loads regular, italic, semibold and bold for two families quickly adds up.

A lean setup is easy to remember. Load one heading weight, body regular and body bold. Add body italic only if your descriptions actually use it.

Contrast and line length

Contrast is covered by W3C's guidance on success criterion 1.4.3, which is level AA in WCAG 2.2. Regular text needs a ratio of at least 4.5:1. Large text can drop to 3:1. Thin fonts may still look faint, so check your theme's actual colors in a contrast checker.

Line length matters too. WCAG success criterion 1.4.8, Visual Presentation, is a level AAA criterion, so it isn't required for AA conformance. It asks that blocks of text can be shown no wider than 80 characters. It also suggests line spacing of at least 1.5 within paragraphs. These numbers still make a useful sanity check for long descriptions on desktop.

Then open a product page on your phone. If the care note needs zooming, a heading leaves one word alone on a line, or the price wraps, adjust sizes before you change fonts.

When the theme picker is enough, and when it isn't

For most small stores the theme editor is enough, and changes there are easy to undo. Many themes, free ones included, offer heading and body font settings drawn from Shopify's library; check your theme's Typography settings to see what yours has. Still choosing a base theme? A free option like Sense or Craft is a clean place to compare pairings. Shopify's Theme Store listing pitches Craft on roomy spacing and refined type.

You may need more than the picker in three cases. Your brand has a licensed font that isn't in Shopify's library. You need a different font per language or page. Or the library files miss characters you sell in. At that point you can add a custom @font-face rule, as Shopify's docs describe, or use an app.

We make one such app, Fontify, so weigh this mention with that in mind. Its Shopify App Store listing shows a free plan with one curated Google font applied to either body or headings. That's one font, not a pair. The Premium plan, listed at $2.99 per month or $29.99 per year, includes three Google fonts and three custom fonts. Check the listing for current terms before you install.

If your pairing is available in the theme picker and the accents display correctly, you probably don't need an app. Adding one only makes sense when it solves a problem your theme can't.

Questions merchants ask about font pairing

How many fonts should a Shopify store use?

Most stores only need two: a heading font and a body font. Adding a third, for example just for prices, means extra files to load and rarely improves the design. If you want more variety, use the bold or italic weight of your body font.

Will a nice-looking font stay readable on mobile?

Not necessarily. Thin display fonts and pale grey text are the usual problems on small screens. Open your longest product description on a phone, and check the text color against the WCAG AA minimum of 4.5:1 for normal text.

How do I check Vietnamese accents in my theme fonts?

Put a Vietnamese sentence with stacked accents into a product description on a test theme and zoom in. Letters that look like a different typeface are missing from the font file. Shopify's docs list the Latin ranges its library files cover, and those may not include every Vietnamese letter.

Do I need an app to pair fonts on Shopify?

Usually not. Many themes let you set heading and body fonts from Shopify's font library, so check your theme's settings first. An app or custom CSS helps when you need a licensed brand font, per-language fonts or wider character coverage.

Related reading: our free vs paid Shopify themes guide and the Fontify setup doc on changing fonts.