---
title: Styles, colors and fonts
description: Choose one of three style variations, then change colors and fonts in the Site Editor.
url: "https://wpruby.com/knowledgebase/formafern-styles/"
updated: "2026-11-04"
category: WPRuby Themes / Formafern
---

# Styles, colors and fonts

Table of Contents

 [Toggle](#)

- [Style variations](#Style_variations)
- [Change colors and fonts](#Change_colors_and_fonts)
- [Images](#Images)
- [Motion](#Motion)

## Style variations

A style variation changes the palette and type in one click. Go to **Appearance → Editor → Styles** and pick one under **Browse styles**.

| Variation | Look | Headings | Used by the starter |
| --- | --- | --- | --- |
| **Japandi** (default) | Warm ivory, oak and sandstone, with deep moss | Fraunces | Japandi Living |
| **Nordic Light** | White and pale grey, with slate blue | DM Sans | Nordic Light |
| **Modern Loft** | Dark charcoal, with brass and warm walnut | Fraunces | Modern Loft |

[![The Japandi, Nordic Light and Modern Loft styles](https://cdn.wpruby.com/wp-content/uploads/2026/11/04140121/formafern-docs-styles.jpg)](https://cdn.wpruby.com/wp-content/uploads/2026/11/04140121/formafern-docs-styles.jpg)

A style variation changes only colors and type. The header, footer and homepage of a [starter site](https://wpruby.com/knowledgebase/formafern-starter-sites/) are separate: see [Headers, footers and menus](https://wpruby.com/knowledgebase/formafern-headers-and-footers/).

## Change colors and fonts

Go to **Appearance → Editor → Styles → Colors** or **Typography**. Every block that uses a palette color or font updates across the store.

Formafern uses **Fraunces** for headings and **DM Sans** for everything else; Nordic Light uses DM Sans for headings too. Both fonts are bundled with the theme, so nothing loads from other servers.

If you change colors, check that text stays easy to read on its background.

## Images

The homepage and editorial photographs are ordinary Image blocks. In the Site Editor, select one and choose **Replace** to use your own. Room photographs in [Shop the Room](https://wpruby.com/knowledgebase/formafern-rooms/#shop-the-room) are changed in that block's settings.

## Motion

Image and hover transitions and the menu drawer's animation switch off for visitors who have asked their device to reduce motion.