Improved Text Content Management is coming on February 24, 2022

Gone are the days of web-safe fonts with limited choices. Custom fonts are everywhere, allowing brands to maintain consistent online and print styles. We are re-imagining the text editing experience within Beefree SDK to keep up with this reality and provide greater flexibility with font styles.

This upcoming release focuses on improving text management control, enabling a smoother and more predictable editing experience.

This update provides your customers with more options for:

• Conforming to Brand guidelines
• Creating consistent assets across landing pages, one-page websites, popups, and emails.

You always decide when to adopt new Beefree SDK features, but this release also includes changes to the UI your customers already use. The latter will be applied automatically on the date 02/24/2022.

Read on to discover what is changing for your customers.

New options rolling out to all users

The improvements detailed below will be applied to our Title and Button content blocks.

Font-weight

A font family's applied font-weight directly impacts brand communication. Typically, brand guidelines provide specific use cases for a given font-weight to predictably contrast, emphasize and contextualize content. For example, a font family using the "Extra light" weight is often used to call out details not presented with the "Regular" variant.

These guidelines often create a need for multiple versions of the same font within a single design. With our new font-weight control feature, this is now achievable in Beefree SDK.

Title blocks using different weights variants for the Oswald font family

Font-weight values are not available for all fonts. Each font family has a set of defined weights that may be distributed across different font files or provided by a single file.

You may manage font-weight settings via the same editor configuration settings that you use to configure custom fonts. The widget displays only "Regular" and "Bold" as available choices if no options are specified.

The new font-weight selector

What's the difference between the font-weight and the bold option in the text toolbar?
The text toolbar that floats on top of the selected content block applies semantic styles to selected characters, while the options in the sidebar apply to the whole content block.

This title uses the Extra-light variant of the Oswald font family, but the bold style has been applied to "semantics" to highlight it.

Non-breaking space

Non-breaking spaces look exactly like standard spaces but act like a magnet between two words. While traditional spaces may add a line break in an undesirable location (for example, between a two-word phrase like “thank you”), a non-breaking space will keep those two words together. If they do not fit together in one line, a non-breaking space will move them to the next line.

The non-breaking space option in the Title text toolbar

Essentially, the non-breaking space adds a control layer over text rendering when a horizontal space constraint is present.

There are two main reasons for this to happen:

• A web font fails to load, a common issue with some email clients (e.g., Gmail).

• The mobile viewport forces the text to break into multiple lines.

A title that splits into two lines when displayed on mobile

The same title with nonbreaking spaces applied between some words

Changes to existing elements

Consolidated text controls for buttons

We've added the font-weight and font-family properties to the Button content block to provide a more solid experience when editing button labels. This change adopts the same UI disposition presented in the Title block, which has performed well in user tests. We've added these properties as drop-down menus to the content tab of the sidebar.

In addition, the text toolbar has changed by adopting a more compact layout displayed in two lines. We've also enhanced the toolbar with support for merge tags, symbols, and the non-breaking space option.  

Host Application Configuration Changes

Client-side Configuration

The host application must specify an editor configuration to enable a specific font family's font-weight. If no fontWeight property is defined in customFont, only "Regular" (400) and "Bold"(700) will display in the drop-down menu in the content tab of the sidebar.

Here is an example of customFonts property inside the editorFonts object:

// ...
editorFonts: {
  customFonts: [
    {
      name: "Comic Sans MS",
      fontFamily: "'Comic Sans MS', cursive, sans-serif"
    },{
      name: "Indie Flower",
      fontFamily: "'Indie Flower', cursive",
      url: "https://fonts.googleapis.com/css?family=Indie+Flower"
    },{
      name: "Roboto",
      fontFamily: "'Roboto', sans-serif",
      url: "https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap",
      fontWeight: {
        100: 'Thin',
        300: 'Light',
        400: 'Regular',
        500: 'Medium',
        700: 'Bold',
        900: 'Black',
      }
    }
  ]
}
// ...