Working with fonts

The font you use in your communications plays an important role in branding and graphical design. When working with emails, you should make sure your recipients experience your 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. That's why, to be on the safe side, you should 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. Currently, these safe system fonts are available in the email studio:

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

Using Arial

Arial can look different in Outlook and on iPhone because each app and device can render fonts in its own way. So font weight, spacing, and size could be different, even when the same font is used. Understanding why this happens helps you design emails that stay readable and consistent across devices.

Fallback fonts

Outlook for iOS may use system-level fallback fonts, such as Helvetica, instead of the selected Arial font. This helps improve compatibility across mobile devices, but it can make the text look slightly different.

Rendering engines

Because Apple devices and Windows PCs process font sizes and spacing differently, Arial may appear slightly bolder, larger, or more tightly or loosely spaced on an iPhone compared to Outlook on desktop.

Custom web fonts

Popular collections of custom fonts can be found on Google Fonts and Adobe Fonts. Any font from there 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.

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

1. Select on the Fonts panel tab to the left
2. Select the + icon
3. Add the link to the stylesheet (CSS file); a preview of the font will be shown
4. Select a fallback font
5. The select Add font
6. 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')
}