Custom fonts for individual elements

You can set up fonts for 4 types of text elements on a Flexbe page:

• Titles
• Subtitles
• Texts
• Quotations

The selected font is applied to all elements of the selected type on the page.

If you want to set up a unique font for a particular text element, read the instructions below.

Go to the site's Settings -> Fonts.

Upload a file with your own font to the My fonts section. It should be in the WOFF2 or TTF format.

For example, we've uploaded the DidactGothic font.

Once the font is uploaded, click the Settings button and set up the font as you see fit.

Click the Copy to clipboard icon to copy the preset CSS styles of the uploaded font.

Go to the editor of the required page.

Name the Element class in the settings of the text element that should have a unique font. Then click Add.

We've used didact as the class name of the Horizontal menu.

1. Go to the section catalog and select HTML code on the Other tab.

2. Open the section settings, go to the HTML tab and delete all the code. Then click Apply.

3. Now go to the CSS tab and paste the styles of the font you've uploaded.

@font-face {
font-family: "DidactGothic";
font-weight: 400;
font-style: normal;
src: url("/files/DidactGothic-Regular.ttf") format("truetype");
font-display: swap;
}

4. Then you need to add your font to the custom class. Specify the given class name (e.g. didact) from the element settings. Make sure that the values of the font family are identical.

.didact,
.didact * {
font-family: "DidactGothic", Arial, Helvetica, sans-serif;
 }

5. The result looks as follows:

6. Turn on the Isolate scoped styles toggle to apply the customization across the page.

7. Now click Apply and Save the changes on the page.

8. Check the applied changes in the Preview mode.

9. If the custom font works properly, turn your HTML section into a Global section.

10. In the preview mode, the Global section with no HTML code has zero height, which makes it invisible to the users.

 You can use the custom font for any text element on other pages as well. To do that, add the set-up global section to the required page and give the same name to the Element class of the element itself.