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

# Colors and fonts

LanternWP keeps its colors 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: **Open Styles** beside **Colors, fonts and spacing**.
2. Change the **Colors** and the **Typography**. The palette's colors are named by their role, such as Base (the page), Contrast (the text), Primary, Accent and Sale, so a color 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 product card, the logo's height, the frame of product images, the links' underline, hover, 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)).

## A demo's look

Every LanternWP demo's look is in the theme as a style: its colors, fonts, sizes, shape, spacing and product card. They are there with or without LanternWP Companion.

1. Go to **Appearance → Editor**, open **Styles** and select **Browse styles**.
2. Choose a look by the demo's name, such as **Halden** or **Voltline**: each tile shows the look's background and fonts, and its name when you point at it. **Default** is the theme's own look, Common Goods'. The editor shows the look before you save.
3. Select **Save**.

Choosing a look replaces your changes in Styles and the LanternWP panel, except your own CSS; **Revisions** in Styles keeps them. To take only a demo's fonts, choose them under **Typography** in **Browse styles** or on the **Typography** screen, where each set is named by its fonts, the headings' and then the text's: **Newsreader & Inter** is Halden's, **Inter** Kilowatt's, **Jost** Tessel's and **Geist** Voltline's. It changes the fonts and the text sizes and leaves the colors, the shape and the product card as they are.

Importing a demo with Companion gives the store the demo's look the same way, or, if you choose to keep your Styles, leaves it waiting here ([Import a demo store](import-a-demo.md)). **Use the look only** in **Appearance → LanternWP → Demos** puts only a demo's look into Styles; the screen then says **Look:** with the demo's name. **Reset styles**, in the **Styles** menu of the Site Editor, takes the store back to the theme's own look, **Default**.

**Appearance → LanternWP** names the look under its title and under **Colors, fonts and spacing**: **Look: Halden**, **Look: Halden, with your changes**, **Look: Default** after a reset, or **Look: your own** when Styles hold changes but no demo's look, your own CSS among them. The LanternWP panel in the Site Editor names it the same way, with a **Browse styles** button that opens the looks. With Companion, a store that started from a demo whose look is the theme's own, such as Common Goods, says **Look: Common Goods**. When the store no longer has the demo's look as it came, **Apply Halden again** puts it back; your styles before it stay in **Revisions**.

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