Voyado Engage

Working with fonts

The font you use in your communications plays an important role in branding and graphical design. When working with emails, it's important to make sure your recipients experience fonts as you designed them. You can use custom fonts, but be aware that major email clients such as Gmail and Outlook don't display custom fonts. To be on the safe side, consider using a safe system font, which will make emails look the same for all your recipients. 

Safe system fonts

The design studio comes with a few system fonts that are considered “safe”, as almost all systems have them installed. If you decide to use any of them, you can be sure that most of your audience will experience the texts just as you designed them. Currently, these safe system fonts are available in the email studio:

  • Arial
  • Tahoma
  • Trebuchet MS
  • Verdana
  • Georgia
  • Times New Roman
  • Courier New

Custom web fonts

Popular collections of custom fonts can be found on Google Fonts and Adobe Fonts. Any font can be used, as long as it is publicly available online, so it can be downloaded by email recipients, and as long as your company has the right to use it.

Email clients have limited support to display custom web fonts. Right now, only Apple Mail and Outlook Mac can display them correctly.

To use a custom font in the Design studio, you need to add it first. 

Add a custom font dialog

  1. Click on the Fonts panel tab to the left.
  2. Click the + icon.
  3. Add the link to the stylesheet (CSS file).
  4. A preview of the font will be displayed.
  5. Select a fallback font.
  6. Click Add font.
  7. The font can now be used in your email design.

If you are using Google fonts or Adobe fonts they will host the font CSS file. You can find the links in their portals. The CSS file can also be hosted on your own web servers as long as it is publicly accessible.

If you need to create your own font CSS file, it needs to contain CSS code that declare the font names, weights and links to the font files. For example:

@font-face {
  font-display: swap;
  font-family: 'Voyado Text';
  font-style: normal;
  font-weight: 700;
  mso-font-alt: 'Arial';
  src: url(https://voyado.com/wp-content/themes/voyado/dist/assets/fonts/VoyadoText-Bold.woff2) format('woff2')
}
@font-face {
  font-display: swap;
  font-family: 'Voyado Text';
  font-style: normal;
  font-weight: 400;
  mso-font-alt: 'Arial';
  src: url(https://voyado.com/wp-content/themes/voyado/dist/assets/fonts/VoyadoText-Regular.woff2) format('woff2')
}

Make sure you don't add too many fonts, as they will be imported to your email and add to its total file size. To limit the file size, you can import only specific font weights. If you, for example, only need the bold version in your design, then do not import the other weights.

Article last reviewed

Was this article helpful?

4 out of 5 found this helpful

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.