Typography
Customize the typography of your website.
Define the typography quickly for Body, Navigation and Headings. The following settings can be found in the Template Options → Typography panel.
Common Options:
- 1.Font – Choose your font family
- 2.Weight – Choose the weight of the font
- 3.Size – Choose a size for your font (px, em, etc.)
- 4.Color - Choose a color for your font
- 5.Subset – Option for Google Fonts only. Choose subset used for language native letters for the font, like Latin, Latin Ext, Cyrillic, Vietnamese and Greek. Not all Google Fonts support your native language, so you may not see all extra diacritical marks. In that case, you have to choose a different font.
- 6.Line-Height – Set your line-height, the distance between lines of text.
- 7.Letter Spacing – Set horizontal spacing between text characters. Positive values of letter-spacing cause characters to spread farther apart, while negative values of letter-spacing bring characters closer together.
- 8.Alignment - Set the horizontal alignment of the content.
Notice! Not all fonts fully support your native language diacritical marks (signs). Check it on Google Fonts Website for more info.
Typography Options
Body and Headings
Option | Description |
Body | Define the typography for the main body text and regular text paragraphs. |
Heading 1 -> Heading 6 | Define the typography for headings ( h1, h2, h3, h4, h5, h6). |
Custom
Choose a special font from Google Font list and then using css selectors to specify the elements that you wish to use the custom font face.
Custom typography
Tip! To change the font size used for Tablet and Mobile devices.
The device preview buttons can be found at the top of the Toolbar. Use the device icons to check how your site looks on different device sizes.
When using any Google Service (Google Fonts), you agree to the Google Privacy Policy. It explains in detail what data is collected, why it is collected, and what happens with it.
In general, Google claims GDPR compliance. But if you feel that Google's explanations are not enough for law regulation in your country - anytime you can decide to:
- 1.Not use Google Fonts on your site, disable them from Typography settings, and use default system font (tip below).
- 2.Replace Google Fonts, loads the fonts from your own server, and no requests are sent to Google Fonts server. Use Fontsquirrel or google-webfonts-helper service which makes it easy to self-host any font from Google Fonts. If you embed them from your own server, everything in a legal way would be OK again. Check the Add Custom Fonts section for more info.
Default System Font
The default system font will be used depending on the user’s operating system: San Francisco on macOS and iOS, Segoe UI on Windows, Roboto on Android, Helvetica Neue on older macOS and Arial on any other system.
Last modified 2yr ago