Manage Fonts - Page Block and Element Level

Modified on Sun, 4 Aug at 9:38 PM

Managing fonts involves organizing, installing, and using fonts effectively across various design projects and platforms. By effectively managing fonts, you can streamline your design workflow, maintain consistency across projects, and enhance the visual appeal and readability of your designs.

There are two ways to Manage Fonts in your ABM Pages.

Add Google Fonts
Upload Fonts

You can Manage Fonts at the Page Block level as well as the Element level. Here is how to add Google Fonts or Upload Custom Fonts in any Page Blocks on your ABM Page.

Select a Page Block or an Element in a page block, click on the Style option. The Style contains the following: Visibility, Typography, Border, Background, Spacing, and Dimension.

Page Block Level

Element Level
Select Typography. Typography settings contain various design attributes that influence the appearance of text on a web page.
Under Font Family section, the system defined Fonts are displayed in the drop down, allowing you to choose from different font families
Click on the Wheel icon to Manage Fonts.
Font Management pop-up is displayed with Google Font and Upload Font buttons.

Manage Google Fonts

Click on the Google Font button in the Font Management pop-up.
A list of Google Fonts is displayed with Add Font (+) button along with Search option and Cancel.
Type a specific Font in the Search option. For Example: Alkatra. The Font should be displayed with Add Font (+) icon and Cancel in the search results.
Click on Add Font (+) icon to add the font.
The Font preview section is displayed with Font preview, Languages toggle, Size toggle, Cancel, and Add button.
Note: At least one Language and one Size toggle should be enabled to add a Font.
Click on Add button. The selected Font is displayed in the Font Management popup with Google, Edit, and Delete Icons.
Google Icon: Indicates that the Font is a Google font.
Click on the Edit Icon. The Edit Font section is displayed. Make Edits and click on the Save button. Changes are saved and the Font saved successfully message is displayed.
Click on the Delete Font Icon, a confirmation message is displayed. Click Yes, a message is displayed Font deleted successfully and the deleted font is removed from the Font Management pop-up.
The added Google Font Alkatra is displayed in the Font Family drop down list.

Manage Upload Fonts

Click on the Upload Font button.
Upload Font section is displayed with fields blank: Font Name, Upload, File Name, Style, Weight, Cancel, and Save.
Click on the Upload button to upload Font(s).
Select a single or multiple web font files and they will be added to the font family.
Note: The uploaded file size should not exceed 10MB .
The Uploaded font is displayed with the Font Name (editable) and File Name, Style, Weight, Cancel, and Save.
Font Name: The Name of the Font is the file name uploaded and can be edited.
File Name: The Name of the File uploaded
Style: Font Style refers to the visual appearance or design characteristics of a font. You can select a style from the drop down.
Weight: Font weight refers to the thickness or heaviness of the Font. You can select a different font weight from the drop down.
Click on the Cancel and the Font Management page with Google Font and Upload Font buttons is displayed.
Click on the Save button. The Uploaded font is displayed in the Font Management page with Custom Font icon, Edit, and Delete Icons.
- Custom Font Icon: Indicates that the font is a Custom font and has been uploaded.
- Click on the Edit Icon. the Edit Font section is displayed. Make Edits and click on the Save button. Changes will be saved and the Font saved successfully message is displayed.
- Click on the Delete Font Icon, a confirmation pop-up is displayed. Click Yes and the Font deleted successfully message is displayed. The deleted font is removed from the Font Management pop-up.
The Uploaded Font is displayed in the Font Family drop down list.