Communik.io : Site & App builder
communik.io

Choose common heading and body fonts

Set two font families centrally while keeping the scope of local typography clear.
Published on 11/5/2026

Two common families are often enough: one for headings and another for the body. The theme gathers these controls so you do not need to edit every text separately.

1. Find the two controls

In Design, open Theme, then Classes. Generic contains Font title for elements using the common heading family. Body contains the body font.

These are distinct controls. Changing the body family does not automatically replace the heading family.

The common heading font control.

2. Choose a family

Open the selector. For Google Fonts, use its tab and Search font, select a family and compare the real page alongside the panel.

The recording compares Cormorant Garamond for headings with DM Sans for the body. These are demonstration choices, not a requirement for your design.

Default offers generic families. A personal font uses an uploaded file in the custom area; that import has its own guide and is not shown in this recording.

Cormorant Garamond applied to the common heading family.
DM Sans chosen independently for body text.

3. Separate family, weight and size

Family is the shape of the letters. Weight is their thickness; size is their height. Choosing a family does not guarantee it contains every weight.

For the weight or size of a particular heading, select that heading and use its text settings. For the common presentation of rich fields, use Prose / Typography.

4. Check local exceptions

An element can have its own family, and selected words can have local formatting. A theme font change does not erase those choices.

If a text stays unchanged, inspect its font setting and decide whether it should follow the theme or retain its exception.

5. Wait for fonts and inspect the layout

Wait until the family loads. A new family can take more space and change line breaks. Do not resize a container to compensate for a font that has not finished loading.

Compare headings, navigation, buttons and paragraphs. Check accented characters, available weights and small widths, then save and review staging.

Continue

Set the typography of one element · Style rich-text content