How to use webfonts in the message?

This tutorial only applies to the new newsletter editor BETA.

We’ve included webfonts in the message creators to give you an edge when creating messages. They allow your messages to stand out and make more remarkable impressions on your readers. Choosing just the right font for your message is now easier and gives you more options than ever. Now you can add each font from the Google fonts collection to your message. You can check all of them here.

Webfonts are an addition to the system fonts that you can use in your message.

System fonts – these are the fonts that are supported by every email client and operating system as they are preinstalled. Designing with them makes sure that your message will display in the same way in every device.

Webfonts – these are additional fonts downloaded from an external source (in our case from Google Fonts). They can display differently on various devices, depending on whether a given email client supports webfonts. Webfonts are also a great way to give a more personal look to the message.

Webfonts are currently supported on these main email clients:

  • Apple Mail,
  • iOS Mail,
  • Android’s native email app (not Gmail),
  • Outlook on Android and iOS,
  • Outlook for Mac.

We include 4 webfonts by default:

  • Lato,
  • Open sans,
  • Roboto,
  • Ubuntu.

We’ve selected these fonts as they support the widest set of characters and styles.

What is a fallback font?

A fallback font is a font that will be loaded when your selected webfont cannot be displayed on a given email client. Fallback fonts can be selected from the list of system fonts to make sure your message text is displayed even if webfonts are not supported.

How can I add a webfont to my message?

To add a webfont:

  1. Select the text element on the workspace.
  2. Expand the font dropdown.
  3. Scroll down till you see Add custom font and click on it.
    fonts add custom.
  4. A pop up will appear with the list of all the available webfonts, their preview as well as an option to set up a fallback font.
    fonts add custom settings.
  5. One you’ve selected your webfont and the fallback font, click Add font.
  6. Your font will be added to the list of available fonts in the dropdown. It will also be saved for future messages you create, so you don’t need to add it every time.

Note: please be aware that not all webfonts support all character sets, so it’s good to check them out on the Google Fonts page before adding them to the editor. You can check them here: https://fonts.google.com/.