Fonts

Choose the typefaces your panel uses.

License required

Font customization needs the Theme Customization license feature.

Upload your own fonts and decide where the panel uses them.

Navigate to Admin > Appearance > Fonts.

You need the View Appearance permission to open the page, and Manage Appearance to upload or change a font.

The page has two tabs: Font Library and Font Assignments.

Font library

This tab lists every font that the panel knows. Each card shows:

• The font name.
• A type badge: system, google, or uploaded.
• A category badge: sans-serif, serif, monospace, display, or handwriting.
• A Default badge on the default font.
• The CSS font family name.
• A live preview, with a bold line.
• A Font Files row of six slots: Regular (400), Medium (500), Semibold (600), Bold (700), Italic, and Bold Italic.

A green slot holds a file. Hover over it and click the cross to delete that file. A grey slot is empty. Click it to upload a file for that weight.

Two icons sit on each card:

• The eye icon turns the font on or off.
• The bin icon deletes the font. The default font has no bin icon.

When you delete a font, any assignment that used it falls back to the default.

TIP

The panel has no Google Fonts picker. Upload a font file to add a font.

Uploading a font

1. Click Upload Font.
2. Choose the file. The supported formats are .ttf, .otf, .woff, and .woff2.
3. The panel reads the file name and fills in the fields. Correct them if they are wrong:
   • Font Name - the name that you see in the panel, for example "Inter".
   • CSS Font Family - the family name in CSS. Leave it empty to use the font name.
   • Category - Sans Serif, Serif, Monospace, Display, or Handwriting.
   • Weight/Style - Regular (400), Medium (500), Semibold (600), Bold (700), Italic, or Bold Italic.
4. Click Upload.

If a font with that name exists, the panel says so and the button reads Add Variant. The file then joins the existing family as another weight.

Upload one file for each weight and style that you need.

Font assignments

Global font scale

The slider changes the text size across the whole panel. The range is 75 to 150 percent. The default is 100 percent. Click Save under the slider.

Assignments

Four roles exist:

Role	Used for
Headings	Page titles and section headers.
Body Text	Paragraphs and general content.
Monospace	Code, console output, and technical text.
UI Elements	Buttons, labels, and navigation.

Each row shows the current font, size, weight, and line height. Click the pencil icon to edit the row.

Field	Description
Font	The font family. The list holds System Default and every enabled font.
Fallback Font Stack	The fonts that the browser uses when the first one fails, for example -apple-system, sans-serif.
Font Size	A CSS size, for example 14px or 1rem.
Font Weight	Default, Light (300), Regular (400), Medium (500), Semibold (600), or Bold (700).
Line Height	A number or a length, for example 1.5 or 24px.
Letter Spacing	A length, for example 0.5px or 0.02em.

Click Save on the row. The change applies at once across the panel.

Default fonts

The panel starts on the fonts already on the device. Text uses whatever the operating system provides. Code uses a monospace font such as JetBrains Mono, Fira Code or Consolas.