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; } `

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.

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

• Navigation Style takes priority. Its font, colour, case and weight apply to links in both the header and the footer, and they win over your CSS. To style nav-link or footer-link yourself, clear that setting, or add !important to your rule.

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

Related articles

• Custom Branding

• Reader Portal