Installing Custom Fonts

How to add a Custom Font?

You can add Custom Fonts by going to Flex Admin → Edit Style → Typography → Font Files

Make sure that the font files do not contain any spaces in the title as otherwise, the browser won’t recognize them, therefore it won’t be able to render them.

Font Formats:

To ensure that the custom fonts uploaded to the site work well across multiple devices be sure to use these 3 formats: .OTF .TTF .WOFF

There are many other font formats out there, though these are the formats we recommend and they work 100%.

.WOFF format is much preferred to have as it is one of the fastest fonts to load on the web.

After the fonts were uploaded, go to My Font Styles and click on Add New, where you can create a custom font style using either the theme’s fonts or the custom ones that were uploaded.

NOTE: If you’re uploading the Font Files first, to use the uploaded Font Files inside your Flex blocks, make sure to assign them to a Font Style.

How to add an Adobe Font?

The process is similar to the one of creating a custom font style. The only difference is that instead of adding the TTF, OTF, or WOFF file into your Media Library, you’ll have to add an embedded code.

First things first, you’ll have to make sure that your theme is updated to its latest version.

Next, select the Adobe Fonts that you want to use on your website and add them to your Project. More details about it are here. Create your web project in Adobe fonts.

Once added, copy the embedded code into your clipboard and access your website dashboard.

Next, go to Flex Admin → Edit Style → Typography → My Font Styles → “Add New” →  click to change the Typeface → Typekit.

Add your embed code, click on Connect Fonts & Save Font Style.

Then go back to Typography –> Custom Fonts and you’ll see all your Adobe Fonts added.