---
title: Colours and fonts
summary: Change the colours and fonts every page of the store follows, in Styles.
url: https://lanternwp.com/docs/colours-and-fonts
updated: 2026-10-08
---

# Colours and fonts

LanternWP keeps its colours and fonts in one place, **Styles**, so a change there reaches every page: the header, the product cards, the cart and the checkout.

1. Go to **Appearance → Editor** and open **Styles**. **Appearance → LanternWP** links there too, from **Choose colours and fonts**.
2. Change the **Colors** and the **Typography**. The palette's colours are named by their role, such as Base (the page), Contrast (the text), Primary, Accent and Sale, so a colour changes everywhere that role is used.
3. Select **Save**.

## Fonts, headings and buttons

- **Typography → Text** sets the font of the text, and **Typography → Headings** the **Font**, **Appearance** (the weight) and **Letter spacing** of the headings. Everything set like a heading follows them too: the mini-cart's title, the order summary in the cart and the checkout, the review scores and the figures on the About page.
- **Blocks → Button** sets the **Radius** and the **Padding** of every button, WooCommerce's included. The radius also rounds the other controls of the store: filter chips, pagination, the search field and the quantity steppers. A radius with different corners changes only the Button block.

The editor shows each change before you save it. The corners of fields, panels and images, the labels, the products per row and the density are in the LanternWP panel ([Shape, labels and spacing](shape-and-spacing.md)).

## The look your store started with

Importing a demo with LanternWP Companion makes the demo's look the store's starting look: Voltline's dark colours, Kilowatt's blue, Common Goods' neutral palette. Your changes in Styles sit over it. **Reset styles**, in the **Styles** menu of the Site Editor, takes them away and comes back to the demo's look, not to the theme's own; **Revisions** in Styles keeps every look you saved. To start from another demo's look, select **Use the look only** on its card in **Appearance → Demos** ([Use only a demo's look](import-a-demo.md#use-only-a-demos-look)). Without Companion, or before any import, the starting look is the theme's own, Common Goods'.

Keep enough contrast between text and its background: the theme's own palettes and the demos' are checked for it, and a colour you pick yourself is not.