ByteEditor Website Builder

Customize Fonts

⚠ Note

In ByteEditor 17, the fonts of a design are theme tokens, like its colours. You edit them as JSON on the design's “Theme” tab. Fonts come from Google Fonts and load automatically.

Step 1. Open the Design Builder

Click Design Builder in the Content section and open the design you want to change (see Customize Colors for how to choose the default design).

Step 2. Open the Theme tab

Open the Theme tab. Font tokens sit in the same “tokens” object as the colours.

Step 3. Change a font

Each text element (body text, headings 1–6 and buttons) has seven font tokens. For example, to set Heading 1 to Playfair Display:

"font.h1.family": "Playfair Display",
"font.h1.category": "serif",
"font.h1.weight": "700",
"font.h1.size.desktop": "56",
"font.h1.size.tablet": "44",
"font.h1.size.mobile": "36"

Use the font's exact name from fonts.google.com. The site loads it automatically, so no extra CSS or link is needed. A token that isn't in the JSON uses its default value (see the tables below).

💡 An invalid value (for example, a weight of “bold” instead of “700”) is ignored and the default is used instead. If a font name is misspelled, Google Fonts can't find it and the browser falls back to the font's category.

Step 4. Save and publish

Click Save and publish. The site's styles are regenerated automatically.

Font tokens

The tokens are named font.{element}.{property}.

Properties

Property	What it sets	Allowed values
family	Font family from Google Fonts	Any Google Fonts name, e.g. “Poppins”
category	Fallback type if the font can't load	sans-serif, serif, monospace, display, handwriting
style	Font style	normal, italic, oblique
weight	Font weight	100, 200 … 900
size.desktop	Font size on desktop, in px	Number, e.g. “16”
size.tablet	Font size on screens up to 992 px wide	Number
size.mobile	Font size on screens up to 575 px wide	Number

Elements

Element	What it styles	Default family	Default weight	Size (desktop / tablet / mobile)
text	Body text	Poppins	400	16 / 16 / 16
h1	Heading 1	DM Sans	700	54 / 48 / 40
h2	Heading 2	DM Sans	700	46 / 34 / 34
h3	Heading 3	DM Sans	500	32 / 32 / 32
h4	Heading 4	DM Sans	500	26 / 26 / 26
h5	Heading 5	DM Sans	500	22 / 22 / 22
h6	Heading 6	DM Sans	700	18 / 18 / 18
button	Button text	Poppins	400	16 / 16 / 16

💡 Fonts are the same everywhere on the site: unlike colours, they can't be changed in a theme variant.