Storefront Fonts and Custom CSS

Storefront Fonts and Custom CSS

Your storefront can carry your brand's typography and look without any code. When you want to go further, custom CSS lets you restyle almost anything. This article covers both, and explains how to write CSS that keeps working as we improve the storefront.

Plan requirement: The storefront, including these settings, is available on Business and Enterprise plans.

Fonts

1. Go to Settings → Storefront

2. Find the Typography section

3. Choose a Heading font and a Body font

4. Click Save

The body font applies to the whole storefront. The heading font applies to headings, section titles and the hero title; if you leave it on Same as body font, headings use the body font too. You can see both in the preview before saving.

To give navigation links a different font, use Navigation Style, just below Typography. A font set there takes priority over the body font for links in the header and footer.

Your brand colour is set once, under Settings → Branding → Brand Colors, and is used for buttons, links and highlights throughout the storefront.

Custom CSS

For anything the settings don't cover, add CSS in Settings → Storefront → Custom CSS.

Write against hooks and tokens, not class names

Every part of the storefront you are likely to restyle carries a named hook, a data-zf attribute, and a few theme values are exposed as CSS variables (tokens). These are the supported way to style your storefront. We keep them stable, and a change to one is treated as a breaking change.

Everything else on the page, such as class names like .bg-teal or .text-xs and the way elements are nested, is internal. It can change in any update, and CSS that relies on it may stop applying without warning.

`css / Supported: keeps working / [data-zf="hero-overlay"] { background-image: linear-gradient(145deg, #2a1f18, #1a1510); }

/ Not supported: may break in any update / section.relative > div.absolute { background-image: linear-gradient(145deg, #2a1f18, #1a1510); } `

Tokens

Set a token on [data-zf="store"] and the storefront uses your value everywhere it applies:

`css [data-zf="store"] { --zf-accent: #8a9683; --zf-font-heading: 'Playfair Display', Georgia, serif; --zf-bg: #f5ede3; --zf-surface: #fdf8f3; --zf-text: #1e1a19; } `

The colour tokens apply whether a reader's device is in light or dark mode. If you change backgrounds and surfaces, set the text tokens too, so text stays readable on them.

Your theme also applies to your readers' account pages (library, shelves, wishlist, purchases, sessions) and to the sign-in, sign-up and password-reset pages. They use the same store hook and tokens; the other hooks are only on the storefront itself.

If you want a font that isn't in the Typography list, load it from Google Fonts with an @import at the very top of your CSS. Fonts from other sites are blocked by the storefront's security policy.

Hooks

Target a hook with an attribute selector, such as [data-zf="card-title"].

`css [data-zf="footer"] { background: #2a2320; } [data-zf="footer-link"] { color: #c4b5aa; letter-spacing: 0.06em; } [data-zf="card"]:hover { border-color: var(--zf-accent); } `

Tips

• Start with the settings. A colour or font set in Branding or Typography reaches places your CSS may not, such as the mobile menu and new parts of the storefront as we add them.

• Keep accent text readable. A light accent can look right on a button and still be too faint as text. Set --zf-accent-text to a darker shade of it; buttons keep --zf-accent.

• Set tokens before writing rules. Changing --zf-accent recolours everything that uses the accent. A rule only changes what it selects.

• Navigation Style applies to header and footer links. Its font, colour, case and weight are a starting point: a rule of your own on [data-zf="nav-link"] or [data-zf="footer-link"] takes priority over them.

• Check contrast. If you change colours, make sure text stays readable against its background, especially on buttons.

Related articles

• Custom Branding

• Reader Portal