You can create your own font pair if the preset ones don’t match your website’s style. All fonts from Google Fonts are supported.
Here’s how to do this:
- On the Topbar, go to Design → Fonts to open the Fonts menu.
- In the Fonts menu, click the blue “+” icon to add a new custom font pair.
- A window will open where you can select two fonts from the full Google Fonts library. As you select fonts, you’ll immediately see the changes on your site. This helps you test how the fonts look together before saving.
|
Primary font applies to: Heading 1 Heading 2 Heading 3 Heading 4 Buttons Site name Heading phone |
Secondary font applies to: Heading 5 Heading 6 Normal text (paragraphs) Quotes Navigation Labels and input fields in forms |
- When you’re happy with your selection, click Save, and then Save again in the next window.
Here’s the video to help you:
Note: If you don’t see any changes after applying a font, it means that this font doesn’t support your website’s language.
Customizing a custom font pair
After saving a custom font pair, you can fine-tune its typography settings. All font changes appear on your website immediately while you edit them.
Note: Advanced font customization is available for users on the Gold plan.
Here’s how to start customizing the font pair:
- In Design → Fonts, hover over your selected font pair.
- Click the Settings icon that appears on the font pair.
- A settings dialog opens where you can adjust typography globally.
Changes made here affect all pages on your site, so you don’t need to edit each block separately.
Available font settings
You can customize these settings for:
- Heading 1
- Heading 2
- Heading 3
- Heading 4
- Heading 5
- Heading 6
- Paragraph
- Quote
- Buttons
- Navigation
- Site title
- Phone number
- Form label
Font options you can change
Font
Choose any supported font from Google Fonts. Font previews are shown in the selected font.
Weight
Available weights depend on the selected font family. Some fonts support fewer weight options.
Size
- Preset sizes from 12 to 64 are available
- You can also enter a custom value from 1 to 400
Height
Preset options:
- Auto
- 1
- 1.1
- 1.2
- 1.3
- 1.5
- 1.6
- 1.7
You can also enter a custom value from 0.06 em to 100 em.
Auto means line height adjusts automatically, especially on mobile screens, based on the font size.
Color
To change text color:
- Click Manage colors.
- In the new dialog select the color scheme you like and the font color you like.
- Click Save to apply changes.
Note: Color changes are tied to the active color scheme. For example, if you change a heading color in the Light color scheme, all blocks using that scheme will update.
Capitalization
Here you have these options available:
- Uppercase
- Lowercase
- Title case
Letter spacing
- Range: -1 em to 1 em
- Default: 0 em
Use negative values to reduce spacing between letters, for example -0.04 em.
Use positive values to increase spacing, for example 0.24 em.
You can also use keyboard arrows ↑ and ↓ to adjust values in 0.1 em steps.
Note: Some fonts do not support all settings, especially certain font weights. This depends on the font itself. If you don’t see changes after applying a font, the font may not support your website language.
If you have any questions, please contact our Support Team.
Ready to use your new knowledge? – Edit your site!