Fonts

The drawer has two type controls, Font (body) and Heading font, both in the Design panel. By default the body follows your store's own font and headings follow the body, so a new cart already looks like your theme.

The options

Theme font — the drawer sets no typeface of its own and inherits your storefront's. The field's hint says it plainly: "Uses your store's font. The preview shows a stand-in." The admin cannot load your theme's font, so the editor preview shows a different face than your store will. This is the default.

Modern sans, Geometric sans, Humanist sans, Editorial serif, Classic serif, Monospace — six built-in families. Each is a stack of typefaces already installed on the shopper's device (for example, Classic serif resolves to Charter, Sitka Text, Cambria or Georgia, whichever the device has). Nothing is downloaded, so they cost nothing in page weight and cannot fail to load.

Custom (loaded by your theme) — point the drawer at a family your theme already loads. A Font family field appears; type it exactly as your theme declares it, for example "Brand Sans", sans-serif. Nothing is downloaded — if your theme stops loading that family, the drawer falls back like any other CSS font stack. Maximum 200 characters.

Google Font — load a family from Google Fonts on your store. Pick from the list, grouped into Sans serif, Serif, Display, Monospace and Handwriting, or choose Other… and type a name as it appears on fonts.google.com, for example Playfair Display. Maximum 60 characters. Weights 400, 500, 600 and 700 are requested, with display=swap, so text is readable before the font arrives.

Heading font has all of the above plus Same as body, which is the default.

Choosing between them

• Want the drawer to disappear into your theme? Leave both on the defaults.
• Want a specific brand face and your theme already loads it? Use Custom (loaded by your theme) — it adds no extra request.
• Want a face your theme does not load? Use Google Font. It adds one stylesheet request to your storefront.
• Want typographic character with zero cost? Use one of the six built-in families.

A common pairing is a serif heading over a sans body: set Font to Modern sans and Heading font to Editorial serif. That is exactly what the Atelier template does with Classic serif and Editorial serif.

Templates set fonts too

Each template seeds both fields, and switching template replaces them:

Switching template also clears any custom or Google family you typed. Set the fonts after you settle on a template, not before.

What fonts do not control

Type size is a separate control. Title size lives in Design → Size & shape; the rest of the drawer's sizes are fixed by the template and can be overridden with custom CSS — see Cart drawer CSS variables.

Headings in Atelier are set in uppercase with wide letter spacing. That is the template's own styling, not the font choice: picking Editorial serif on another template does not make headings uppercase.

Related

• Choosing a design
• The editor