1. Help Center
  2. Content
  3. Email

Use of fonts in Connectif's Email Editor

Avatar
Connectif Support
Created
Updated
Follow

When creating emails aligned with marketing objectives, it's important to understand how fonts work. This helps you select those that best align with your brand and design while also knowing their limitations when sending consistent emails across different email clients.

This article explains the properties of the fonts available in the Email Editor of Connectif and how they behave across email clients. This way, you can choose the most appropriate fonts when designing your emails with Connectif.

 

1. Properties

Many email clients block certain fonts and use fallback fonts. Therefore, although the Connectif Email Editor offers many font options, emails may not look exactly the same as designed since not all devices and email providers have access to the same fonts.

1.1. How fonts work

  • There are two main ways a device can access and use a font: system fonts (fonts stored on the device) and web fonts (loaded from an external server).
  • Some basic system fonts come pre-installed on most devices (like Georgia and Verdana), but they can vary significantly across devices. Thus, fonts that work on most devices are called web-safe fonts.
  • When creating emails, it's important to consider the available fonts. There are web-safe fonts and custom fonts. Custom fonts are usually web fonts (but not web-safe) and often have one or more fallback fonts assigned.

1.1.1. How web-safe fonts work

  • Web-safe fonts are those widely installed across most devices and operating systems.
  • They display correctly in almost all email clients, regardless of platform or device.
  • Examples: Arial, Times New Roman, Georgia, and Verdana.

Using web-safe fonts ensures they will display correctly in most email clients.

1.1.2. How custom fonts work

  • Custom fonts are not guaranteed to work on all devices and operating systems.
  • These are personalized fonts that require CSS code with fallback fonts to ensure that if the primary font is unavailable, a similar one will be used instead.
  • It's common to include several fallback fonts to ensure the content still looks good.
 

Using custom fonts in emails can offer a more personalized and appealing design, but it may lead to inconsistencies in some email clients.

1.2. How fonts work in different email clients

  • Email clients (such as Gmail, Outlook, or Apple Mail) interpret fonts differently.
  • Some email clients, especially those on mobile devices or older desktop app versions, may not support certain custom fonts.

  • If the email client supports <link>, @import or @font-face, web fonts can display correctly using standard HTML and CSS.

  • Only these email clients support web fonts through services like Google Web Fonts:

    • Outlook for Mac.
    • iOS Mail (the default email browser on iOS).
    • Apple Mail.
    • Android (default client, not Gmail).
    • Samsung Mail (Android 8.0).
    • Thunderbird.
  • Gmail generally does not support web fonts, except Roboto.
 

It’s important to test emails across multiple clients to ensure consistent font presentation.

 

2. How fonts are used in Connectif

2.1. Fonts available in Connectif's Email Editor

In Connectif's Email Editor, a combination of web-safe fonts and custom fonts is available.

Uso de las fuentes en el Editor de Email - 1-min.png

Currently, these are the web-safe fonts available in the Email Editor:

  • Sans-serif:
    • Arial
    • Arial Black
    • Arial Narrow
    • Arial Rounded MT Bold
    • Avant Garde
    • Calibri
    • Candara
    • Century Gothic
    • Franklin Gothic Medium
    • Futura
    • Geneva
    • Gill Sans
    • Helvetica
    • Impact
    • Lucida Grande
    • OptimaSegoe UI
    • Tahoma
    • Trebuchet MS
    • Verdana
  • Serif:
    • Big Caslon
    • Bodoni MT
    • Book Antiqua
    • Calisto MT
    • Cambria
    • Didot
    • Garamond
    • Georgia
    • Goudy Old Style
    • Hoefler Text
    • Lucida Bright
    • Palatino
    • Perpetua
    • Rockwell
    • Rockwell Extra Bold
    • Baskerville
    • Times New Roman
  • Monospaced:
    • Consolas
    • Courier New
    • Lucida Console
    • Lucida Sans Typewriter
    • Monaco
    • Andale Mono
  • Fantasy:
    • Copperplate
    • Papyrus
  • Script:
    • Brush Script MT

In addition, the following custom fonts are available with their corresponding fallback fonts:

/* Bitter */
font-family: 'B

itter', Georgia, Times, 'Times New Roman', serif;

/* Comic Sans MS */
font-family: 'Comic Sans MS', 'Comic Neue', cursive;

/* Droid Serif */
font-family: 'Droid Serif', Georgia, Times, 'Times New Roman', serif;

/* Inter */
font-family: 'Inter', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Montserrat */
font-family: 'Montserrat', 'Trebuchet MS', Tahoma, sans-serif;

/* MS Serif */
font-family: 'Microsoft Sans Serif', Georgia, serif;

/* New York */
font-family: 'New York Line', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Open Sans */
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Palatino Linotype */
font-family: 'Palatino Linotype', Palatino, 'Palatino LT STD', 'Book Antiqua', Georgia, serif;

/* Poppins */
font-family: 'Poppins', Arial, 'Helvetica Neue', Helvetica, sans-serif;

/* Roboto */
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans

 

2.2. How custom fonts are served in Connectif

If you choose to display text with a custom font in a Connectif email, only contacts using email clients that have these fonts installed will see it. The rest will see the fallback font.

  

If you want the font to be served to the device where the email is opened, you will need to include it in the email's CSS styles. Connectif does not do this by default.

2.3. Recommendations and best practices for using available fonts in emails

Below are some recommendations for creating emails and using the available fonts in Connectif:

  • Use web-safe fonts whenever possible: To ensure maximum compatibility across all devices and email clients, prioritize using web-safe fonts.
 

The best way to ensure your email looks consistent across all devices is to use a web-safe font.

  • Test on different clients: Before launching an email campaign, test across multiple email clients and devices to ensure that fonts display correctly in all cases.
  • Optimize for mobile devices: Many emails are opened on mobile devices, so it is crucial that fonts are legible on smaller screens. Sans-serif fonts like Arial and Helvetica tend to work well in these cases.
  • Contrast and readability: Make sure the chosen fonts contrast adequately with the email background to maintain optimal readability.

 

 

 Congratulations!
You've reached the end of the lesson.

  

Do you still have unresolved questions?
Remember that our Connectif specialists are available to help you. To contact them, just open a support ticket by clicking the blue “Help” button on your dashboard.

 

Keep learning!

To take full advantage of your Connectif account, we recommend continuing with the following articles:

Was this article helpful?
0 out of 0 found this helpful