Using Custom Fonts in the Email Builder
When designing HTML email systems for your brand, you may need to incorporate custom fonts that align with your brand guidelines. While the Email Builder offers standard fonts, adding custom fonts can enhance your design, provided you include solid fallback options for email clients that don’t support them.
Email Client Support for Custom Fonts
Custom font support varies across email clients. The following clients support custom fonts:
Apple Mail
iOS Mail
Samsung Mail
For those that do not support custom fonts, it’s essential to include a font-stack, which combines custom fonts with system fonts to ensure a consistent display. This stack should have standard fonts as fallbacks. For instance:
css
Copy code
font-family: 'OpenSansBold', Helvetica, Arial, sans-serif;
Hosting Custom Fonts
You can host custom fonts through a service like Google Fonts or on your own servers. If you choose Google Fonts, you can add your custom font by embedding the font link directly in your email design.
For example:
css
Copy code
@font-face {
font-family: 'Festive';
src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap');
}
Font Fallbacks
It’s important to choose fallback fonts that are widely available across devices. This ensures that if an email client doesn’t support custom fonts, your design will still look professional. For a list of common fallback fonts, you can visit: CSS Font Stack.
Setting Up CSS for Emails
To reliably include custom fonts in your emails, you’ll need to use the @font-face rule. Here’s an example setup:
html
Copy code
<style>
@font-face {
font-family: 'Festive';
src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap');
}
* {
font-family: 'Festive', cursive;
}
</style>
When working in the Email Builder, you can insert this custom CSS code under the Appearance tab to apply your custom fonts throughout the email.
Using Custom Fonts in Workflows
If you're using custom fonts within an email workflow, you can also add custom CSS and HTML code to enhance the design. Simply copy the font code and apply it within the workflow's Custom Code section, as shown in the example below:
(Image or GIF placeholder)
Outlook Considerations
Important: When working with older versions of Outlook (2007, 2010, and 2017), you will need to wrap the @font-face rule in a @media query to ensure compatibility, as these versions do not natively support custom fonts.
Adding Custom Fonts in the Builder
To use a custom font directly in the Email Builder, copy your font code and create a custom value for it. This custom value can then be applied across your email templates.
