Website typography has a major impact on both design and usability. Choosing the right fonts, text sizes, spacing, and styles helps improve readability, strengthen branding, and create a more professional user experience.

With Moto4, you can:

• apply ready-made font combinations across the entire website;
• customize typography for specific text types;
• upload your own fonts;
• configure SEO heading tags;
• adjust typography separately for desktop, tablet, and mobile devices.

In this guide, you will learn how to manage website fonts and typography settings.

Contents

• Choosing a Website Font Set
• Customizing Fonts for Specific Text Types
• Choosing Font Style Through Element Settings

Choosing a Website Font Set

The easiest way to maintain consistent typography across your website is by using a predefined font set.

Each font preset automatically applies matching fonts to:

• headings;
• subheadings;
• paragraphs;
• quotes;
• and other text elements.

This means every newly added block will automatically follow the selected typography style without additional editing.

Step 1: Open Site Styles

In the editor control panel, click the Website Styles icon.

Step 2: Open the Typography Section

Navigate to the Typography section.

Here you can browse the available font presets and choose the typography style that best matches your website design.

Filter Fonts by Writing System

Use the filter icon to display fonts for:

• Latin characters;
• Cyrillic characters;
• or all supported writing systems.

This is especially useful for multilingual websites.

Upload Your Own Font

If the built-in font library does not meet your needs, you can upload a custom font to your website.

We support .woff format for the custom fonts. If your font is in another format, you can convert it to .woff using some tools like Convertio or FontSquirrel (in FontSquirrel, we recommend using the "Basic" option to convert fonts, so the font keeps the same characters supported as before).

How to Customize Fonts for Specific Text Types

You can also configure typography separately for different text categories, such as:

• headings;
• subheadings;
• paragraphs;
• quotes;
• captions.

This helps create a more flexible and visually structured website design.

Step 1: Open Typography

In the chosen Preset section of Site Styles, click the currently selected font preset to open detailed typography settings:

Step 2: Select a Text Type

Hover over the text category you want to edit and click the gear icon.

You can customize typography settings independently for each text type.

Step 3: Choose a Device Type

Typography can be configured separately for:

• desktop;
• tablet;
• mobile devices.

This helps optimize readability and responsive design on all screen sizes.

Available Typography Settings

Depending on the selected text type, you may have access to the following customization options.

Font Family and Font Weight

You can:

• select a different font family;
• adjust font weight;
• upload custom fonts.

Available writing system filters include:

• Latin;
• Cyrillic;
• all fonts.

Font Size and Spacing

Typography settings also allow you to configure (separately for each device type!):

• font size;
• line height;
• letter spacing.

These settings are essential for improving readability and visual hierarchy.

Text Style Options

Additional formatting options may include:

• uppercase and lowercase text transformation;
• italic styling.

SEO Heading Tags (H1–H3)

In the SEO section, you can assign default HTML tags for text types.

Supported heading tags include:

• H1;
• H2;
• H3;
• and other text tags.

Proper heading structure improves:

• website SEO;
• accessibility;
• content organization.

Tip: Learn more about configuring H1–H3 tags in the dedicated SEO guide.

Important Notes About Typography Settings

• Available typography settings may vary depending on the selected text type.
• Changes apply globally to all elements using the edited text style.
• Responsive typography settings can differ between desktop, tablet, and mobile layouts.

How to Change Fonts Through Text Element Settings

You can also edit typography directly from an individual text element.

To do this:

1. Click the text element on the page.
2. Open the contextual toolbar.
3. Choose one of the following options:
   • assign another text type;
   • open typography settings for additional customization.

This method is useful for quickly adjusting specific content sections while editing the page.

Publish Your Website

After updating your typography settings, publish your website to apply the changes live.