Font Styles Management

Typography Overview Video

Check the video below to get the overall overview of the Typography functionalities:

What is a Font Style

Before we dive into discussing Font Styles, let us first determine what a Font Style is.

A Font Style is basically a font settings. For example, you may be using the Helvetica font. This is just the Font Family. Attributes like font size, letter spacing, bold, italics, heading 1, line height, etc. is what makes the Font Style.

In many cases the same font family is used across multiple areas, however the applied Font Styles are different.

All Font settings can be found by going to Flotheme – Styles – Typography.

Below we have a few short articles related to Font Style management.

Edit Existing Font Style

To edit an existing Font Style first locate the Font Style you wish to edit. Click on the EDIT icon and proceed with all the required adjustments.

Editing options include:

  • Changing the Font Style name – this is especially useful if you use similar styles with very subtle differences, or need a font style for a specific section of your website.
  • Changing the Font Family, that means selecting a different font.
  • Changing the font sizes, line height, letter spacing, etc. for Mobile and Desktop devices.
  • Changing font to all UPPERCASE / lowercase.
  • etc.

Below you can see a short demo of the available options:

NOTE* – you can reset Font Styles to Default if that is required at any point.

Note: if you changed one of the predefined fonts, please note that in will be changed across the whole site in all the blocks where it is selected (by default or changed by the site administrator).

Create a New Font Style

Adding a New Font Style is almost the same as editing a font style.

Scroll down the font styles list and click on Add New. Add in your Font Style Title so you know which area it is related to. From there on, all options are standard.

When finished, close the Font Style Edit Window and click on Update in the top right corner of the Typography page.

All Done! Now you can go to the block you have created the new font for and select the new font from the list to apply it.

Change Font Styles on Hover/Active

In some cases font interaction is required to stress a certain portion of text. For this we have created a feature that can change the font state on Hovers or when a link is Active (e.g. a page in Menu)

When editing the Font Style, on the right side you have 3 tabs indicating the font state: Default | Hover | Active.
Choose the font state you want to change and make the required adjustments.

*NOTE you can only change the font state to UPPERCASE, lowercase, Capitalize, bold, italics and underline