The first consideration to take into account when working with custom fonts is that email client support is patchy. The following email clients support custom fonts:
Apple Mail
iOS Mail
Samsung Mail
It's important to define a font-stack when using custom fonts. This should include some standard system fonts to make sure that your email renders for clients that don't support custom fonts.
Example: 'OpenSansBold', Helvetica, Arial, sans-serif
To host your custom fonts, you can either use a service such as Google Fonts, or host them yourself. You can add your Google Font directly. Refer to the following image.
For situations where your custom fonts aren't supported, you should select fallbacks that are included on the majority of computers. These fallbacks define what fonts will be displayed if the email client doesn't support custom fonts. Here is a website for fallback fonts:
Please Note: You may need to reach out to a developer for assistance if you don’t have the expertise.
The most reliable way to include a specific font in your email is to use @font-face. Below is an example of this in action:
<style> @font-face { font-family: 'Festive', cursive; src: url('https://fonts.googleapis.com/c...') }
* { font-family: 'Festive', cursive; }
</style>
When you are within the email builder you would add custom CSS on the Appearance tab
When you are using the email builder in a workflow you can add custom code as well. See the screenshot below:
Please Note: When working with Outlook, you need to wrap this @font-face in a @media tag. This is because Outlook 2007, 2010, and 2017 don't support them.
Please Note: If you want to use the custom font in the builder you can copy the custom font code and make a custom value for it and use the custom value.
