The editor has a set of default fonts you can use for your content. In addition, you can choose from a selection of Google Fonts or upload your custom font. In this article, you'll learn how to install and use fonts in your Foleon Doc,
💡 Do you want to set default fonts for your text elements? You can control these in the brand settings.
In this article
How to select a font
When you click on a text element on your page, the text bar will open up at the top of your page. The editor comes with ten default fonts, from Arial to Verdana. In the fonts drop-down menu, you can select a font or add a new one to your Foleon Doc.
If you want to add a new font to your Foleon Doc, you have two options:
💡 You can also add a new font from the brand settings in the custom fonts tab.
Using Google fonts
You can open the font library by clicking on +Add new in the drop-down menu or clicking on custom fonts in the brand settings. Once you click on one of these options, a pop-up window will appear.
You will see the Google fonts option on the left-hand side of the screen. You will find a variety of ready-to-use fonts in the library. If you're looking for a specific style, you can filter the fonts with Serif, Sans Serif, Display, and Handwriting.
⚠️ Your company might not be allowed to use Google's services because of data privacy reasons (e.g., GDPR). For that reason, you're able to upload custom fonts that are normally part of the Google library. This allows you to work with your desired custom font without having to use a Google font.
How to (de)activate a font
Once you've chosen which font to use in your content, select it in the library. The activate font button in the bottom-right corner will then turn blue.
💡 In this example, we activate a Google font, but the same workflow applies to custom fonts.
Once you have activated the font, it will appear in the all active fonts list in the screen's bottom-left corner. In addition, it will also appear in the fonts drop-down menu in the editor.
To deactivate a font, click on the "x" of the font in the All active fonts list. A pop-up will appear asking if you're sure.
⚠️ Make sure you don't use this font in your Foleon Doc when deactivating it. The text that used the deactivated font will change to the default Arial font.
Using custom fonts
Using a custom font in your Foleon Doc can be a great way to stay on-brand. You can find custom fonts all over the internet, both paid and free. Foleon recommends using paid fonts, as they often have the correct metadata that enables a smooth installation in the editor.
You can upload custom WOFF (Web Open Font Format), OTF (OpenType format), or TTF (TrueType Font) fonts in the font library. You'll learn below how to upload a custom font and what to look out for.
⚠️ You can only upload fonts in the WOFF, OTF, or TTF format. When your format is different, the file has to be converted to the correct format with software such as TransType 4 or FontSquirrel. Although this is possible, we don't recommend this as the conversion process might cause font issues in the editor.
How to upload a custom font
Once you have your custom font, you can upload and activate the font in the editor. Go to the brand settings and click the "+" button.A custom font is connected to an account, not just the Foleon Doc where you add it. This means you'll also be able to use it in other projects.
💡 Only admins and designers can upload custom fonts. When you're working with the Content Builder, it's not possible to upload a custom font in the brand settings. Instead, you upload a font in your Brand Kit to apply it to your Docs later.
Click custom fonts in the left-hand side column in the font library. Select a file from your computer or drag and drop the file into the library.
Once you've successfully uploaded the files, you can select and activate them. The font(s) will then show in the All active fonts list and as an active font when you create text in the editor.
In the editor, we display the font type of your custom font with its file extension — e.g., “HelveticaNeue.woff”. If you upload multiple font types of one custom font, this allows you to distinguish the different files.
How to delete a custom font
You can delete a custom font that you have previously uploaded. In the font library, select the font that you want to delete. Then click on the trash icon in the bottom-right corner of the screen.
💡Only admins and designers can delete fonts.
⚠️ Before you delete a custom font from the library, ensure you don't use it in other Foleon Docs or projects. Because custom fonts are connected to a complete account, they will also disappear in other Foleon Docs and be replaced by Arial.
Uploading different font styles
A font can have different styles: bold, italic, regular, etc. When you upload your custom font, the different styles have to be uploaded separately but will be merged into one family.
The styles will be visible in one family if you upload custom fonts with the correct metadata. When you're uploading different styles that appear as separate files in the font library, the files' metadata does not align.
💡 You can change the font family metadata in software such as Transtype 4 or FontSquirrel. If you change the family name and convert them, the editor will recognize the formats as the same family and merge them.
It's not always possible to upload non-western font styles. When you're making — for example — a Foleon Doc for Chinese readers, you will need a font that supports all the characters in Chinese. The Google font Noto will support most of the characters.
The font does not appear in the library
Font family is incorrect or not aligned with the other styles
Font name is incorrect
Font weight is incorrect (italic, bold, etc.)
The font style has an incorrect name
A font can have different styles: bold, italic, regular, etc. When you upload your custom font, the different styles have to be uploaded separately but will be merged into one family.If you can't successfully upload a custom font to the font library, it's probably a corrupt file. This often means it originates from an untrustworthy source (incorrect metadata) or something went wrong in the format conversion process.
Corrupt font files can result in unsuccessful uploads. Below you can see which issues might happen when you are trying to upload your custom font.
If you're not able to upload your custom font(s), we recommend taking the following steps:
Check with your font vendor, explain the issue, and request that they check if they have provided you with the correct files. They might have sent you corrupt files, or something might have gone wrong in the conversion process.
You can open custom fonts in software such as Transtype and FontSquirrel. This software enables you to manage the metadata, which is often the cause of unsuccessful uploads.
You can request our Professional Services team to look at the fonts (paid service). If you're interested in this, please contact our support team.