Change your fonts

Your theme uses two fonts: one for headings and one for body text. Pick a font pair to change both at once, or choose each font from the Google Fonts list.

Pick a font pair

A font pair sets the headings font and the body font together. The Font pair grid holds 12 pairs, each tile showing "Aa" in its fonts. Point at a tile to see its name and fonts.

1. Open your project in Fantasma.

2. In the icon rail, the narrow bar of icons along the edge of the editor, click the paintbrush icon, Styles.

3. Click Typography.

4. Under Font pair, click a tile. The Style book and every page change to the new fonts.

Choose your own fonts

1. In Styles › Typography, under Fonts, click Headings or Body. A list of fonts opens, with System first, then fonts you uploaded, then all 1,946 Google Fonts, the most used first.

2. Enter part of a font's name in Search fonts.

3. Click the font. The pages change to it.

The first time you choose a font while a built-in pair is selected, Fantasma copies that pair into a custom pair named after it, such as "Modern Clean copy", and selects the copy. The built-in pair stays as it was, and clicking its tile brings it back. Custom pairs sit first in the Font pair grid. While a custom pair is selected, a font you choose changes that pair. Custom pairs cannot be renamed. A project holds up to 12 custom pairs. When it has 12, the font fields work only while one of your custom pairs is selected.

To delete a custom pair, point at its tile and click the trash icon, then click Delete. If the theme uses that pair, it switches to Modern Clean.

Change the code font

Code blocks use the monospace font. Built-in pairs use Menlo where the visitor's device has it, and the device's own monospace font elsewhere. The field shows this as Default. A font pair never changes the code font you choose here.

1. In Styles › Typography, next to Fonts, click the sliders icon, Manage fonts.

2. In the Manage fonts dialog, click the field under Monospace.

3. Click a font.

Choose where visitors load the fonts from

In the same Manage fonts dialog, Bundle fonts in theme decides where Google Fonts come from. It is on by default.

• On: the theme file holds the font files, and visitors load them from your Ghost site. Visitors' browsers never contact Google.

• Off: the theme links to Google Fonts, and visitors' browsers load the fonts from Google.

Fonts you upload are always inside the theme file. To add one, see Upload your own font.

Fonts chosen in Ghost Admin

If your Ghost site has a heading or body font chosen in Ghost Admin's design settings, the site shows that font in place of the one set here. To see the fonts from Fantasma on your site, leave Ghost's font settings at the theme default.

Change sizes, weights and spacing

The text styles under Elements on the same screen set how big and how bold each kind of text is. See Text styles and font sizes.

Fantasma saves your changes as you make them. Your Ghost site shows them after you publish your theme.