Installing Custom Fonts

Using Custom Fonts (Adobe, Google & Custom)


Check the video below to get the overall overview of how to use Google Fonts, Adobe Fonts & Custom Fonts.

How to add a Custom Font?

You can add Custom Fonts by going to Flex Admin → Edit Style → Typography → “Add New” 

→ click to change the Typeface → Add Custom Font.

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. 

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 web.

How to add an Adobe Font?

The process is similar to the one of adding a regular custom font to your site. 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 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 → “Add New” →  click to change the Typeface →  Add 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.

How to add a Google Font

You can add Custom Fonts by going to Flex Admin → Edit Style → Typography → “Add New” → click to change the Typeface → Add Google Font.

To make the search process easier, you can search for fonts by typing in the Font Title at the top.

*NOTE – there is a downside to using Google Fonts. Because Google Fonts are considered as an “external” font, meaning not uploaded directly to the website, this may slow down the page load time. To avoid this, in some cases, it is better to manually upload the desired Google Font to the website directly.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us