Visual Email Builder Fonts
At Drip, we do everything in our power to ensure that your email renders consistently across all email clients. As part of this effort, the fonts we support in the visual email builder render regardless of the email client they're opened with.
Currently, there are 10 fonts that are considered web-safe across all email clients, meaning that the font you select when you build your email will be the font displayed when it’s opened by the customer. Email has more constraints than the web because of the many different ways HTML code is consumed and altered by different email clients.
The following fonts are available in the VEB, are web-safe and will display consistently across email clients:
- Comic Sans MS
- Courier New
- Lucida Sans Unicode
- Times New Roman
- Trebuchet MS
HTML Builder Fonts
If you’re using custom fonts in the HTML builder, here are a few things you should consider:
- We cannot guarantee that the font chosen in your email will be the font displayed to the recipient.
- Google fonts don’t render in the majority of email clients (not even Gmail).
- The only Google fonts supported by Gmail are Roboto and Google Sans.
The following email clients support web fonts:
- Apple Mail
- iOS Mail
- Google Android
- Samsung Mail (Android 8.0)
- Outlook for Mac
- Outlook App
To include a custom font in your Custom HTML or Text Builder emails click the Source button in the text editor < >, add a
<style> tag that uses CSS @imports to get the font, and then styles the rest of the text.
Paste the following code:
<style type="text/css">@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
font-family: 'Indie Flower', cursive, sans-serif;
<p class="fontifyme">The quick brown fox jumps over the lazy dog.</p>
The above example uses the Indie Flower font, but you will want to update it with the font you’d like to use in your email.
Use a fallback web safe font in place for those email clients that don’t support web fonts.
Each email client has a default font if the font specified is unavailable. For example, Gmail uses Arial, Apple Mail uses Helvetica, and Outlook uses Calibri. To specify your own fallback font, add it in your code:
Font-family: ‘Indie Flower’, Arial, sans-serif; This adds Arial as your fallback font.
Fallback fonts should be the same type as the web font.
Use a sans-serif fallback font if your web font is a sans-serif font, and a serif fallback font if your web font is a serif font. Using the same style of font helps retain your email’s design in different email clients.