Font management
Last updated
Last updated
© Bee Content Design, Inc. San Francisco, CA | Part of Growens
This feature is available on Beefree SDK paid plans only.
You can customize the list of fonts available in the editor’s text toolbar and the body settings panel.
This feature allows you (or users of your app) to:
Expand the list of available fonts, adding web fonts from popular services, such as Google fonts, font library.org or alike.
Reduce the list of fonts to a limited number of options, removing some or all our default fonts.
Unlike other premium features, fonts are part of the client-side configuration, so they can be defined each time the editor is started.
This flexible approach will help you use this feature in a variety of scenarios. A few example scenarios are the following:
You want your users to customize the list of fonts loaded in the builder when they edit designs. You can now create an interface in your app to do so, and instruct the editor accordingly (see below).
You have multiple levels of users, and you want “contributors” to only see a subset of approved fonts, while “editors” have access to a larger list.
You are a digital marketing agency, and you want to customize the list of fonts in the editor depending on the client/brand for which the email message is being designed.
For instance, in our hosted email design suite (Beefree), we leveraged this Beefree SDK feature to create a “Brand styles > Brand fonts” area where an agency or marketing team can select which fonts have been approved by that brand. Only the selected fonts will be loaded in the builder when an application is initialized. Here is a screenshot.
This object, passed as part of the builder configuration, tells the editor which fonts to load in any drop-down where a list of fonts is shown. It defines the availability of the default fonts and provides a list of additional, custom fonts.
In this example default fonts are loaded, and two new fonts are added: a web safe font (Comic Sans) and a Google hosted web font (Lobster).
Here is a more detailed description on how the editorFonts object is built:
showDefaultsFonts
This boolean parameter indicates if the entire list of default fonts is available or not. When the value is false, only the fonts added as custom fonts will be active in the editor.
customFonts
When the default font parameter is true, the custom fonts declared inside this object will be added to the list of default fonts: both are loaded into the editor. Otherwise, only custom fonts will be shown.
Each customFonts element can have the following properties:
name
This string will be shown in the font dropdown list. You can use the term you prefer and we suggest the usage of common font names, but you can go creative and use semantic names that fit on your application. Long strings may impact the interface, so we recommend to keep it short. The characters { } [ ] : ” / \ | ? * are invalid.
fontFamily
Describes the CSS font stack that will be applied to the final HTML. Is important that you provide at least one fallback font to ensure that the text is not displayed using an unwanted font family. Is important that you use single quote marks with the font names instead of double quotation marks to maintain a correct JSON syntax.
url
This parameter is used only when we work with web fonts. Is important that the URL points to a CSS file with the @font-face properties, and not directly to the font files. To work, the CSS must be hosted in HTTPS.
fontWeight
Adds a new option in the dropdown of the content block’s settings for title, button, paragraph, and list blocks (e.g. 100: Thin). If not defined, only Regular (400) and Bold (700) will be available.
When we add a set of custom fonts, we can decide between system fonts and web fonts. Let’s see some details on what you need to know:
System fonts are installed on the operative systems and don’t need any external resource to work, so we can skip the url parameter.
Web fonts are hosted online and need to be loaded by the email client when the email is opened. Beefree SDK accepts only the CSS font embedding method, and the CSS file must be hosted in HTTPS protocol. You can use services like Google fonts, that provides host, font stacks and a well formatted CSS file.
We want the editor to work with only 2 fonts when creating a message, we want that only Lobster and Cabin fonts are available when editing this message:
In the following example, instead, we don’t want to add new fonts but restrict the default ones to our own selection:
Notice that if you want to change the default set of fonts, you need to disable them and use custom fonts to indicate the new set, including the URL parameter for web fonts.
This is the complete list of the default fonts in the application and its configuration, including the external URL for web fonts:
In this example, we want to add font weight options to our list:
We open a saved template that uses fonts that are not available:
System fonts will display normally in the editor and the text can be edited, but the font-family is not available in the font selector.
Web fonts will fallback to a system font. Text can be edited and the font-family is not available on the font selector.
We are able to save the message that already uses unavailable fonts.
