Web fonts and Typography

Web-safe fonts are fonts likely to be present on a wide range of computer systems, which is why using them increases the likelihood that your content will be displayed in the chosen font on different computers.

Installing Google font

Choosing a font suitable for web usage is just as important as having a visually appealing font, Exai provides a wide list of available web-safe Google fonts for you to choose from. To install a Google font, navigate to Design from the main bar and then select the Font tab. Choose the page grid level, hover over your page and click on the pencil icon. Click the text icon to open the font editor.

You will notice a menu with separate tabs for Normal, Header and Link. This means that you can have different default fonts and font styles for paragraphs, headers and links on your page. Have in mind that you will need to install the font additionally, if you want to use it for a link or a header.

Click on the Search icon to open the list of Google fonts. Once there you will notice few options to help you filter out the type of fonts displayed in the list. Select the font you want to install, if there is more than one version for that font, you will see them appear once you click on the font. Select the version you want to install (one version at a time) and click Done. If you want to install a different font or a version of the same font you will need to go through the same process again.

Editing Typography in text menu

To edit a selected line from your text, go to the Text menu. For example, if you want to change the color, size, or width of the text, but only to a part of your content, all options are available in the Text menu.

Note:

Every change you make in the Text menu in the desktop version is inherited in the mobile version, and vice-versa.


Tip:

When you apply a font to a widget, we recommend using the Style Editor -Text Theme.

When you edit fonts this way, the desktop, and mobile versions are independent of each other.
This means that you can have a different font, font weight and font size in the mobile version of your website.

Every change you make in the Text menu is shared between the desktop and mobile versions of your website.

If you want to do this line in red and bolder font, however, you need to use the Text editor.

Editing typography in style menu

As mentioned before, when you want to set a common font style for the widget,
click the Style submenu and then select the Text theme icon.

Typically, you will have an option to edit the paragraph (or the header if you are inside a header widget) and the link style.
In this editor, you will be able to edit the general text presets of your widgets such as font family, color, size, letter type, shadow, and text alignment.
You can also have different presets for the links in your text.