How to Use Custom Fonts in HTML Email Templates?

Using a custom font in an HTML email template can help you maintain consistent branding and create a more professional email design. However, custom web fonts are not supported by every email client, so it is important to include reliable fallback fonts.

You can use the CSS @font-face rule to define a custom font and then apply it to specific elements in your HTML email template.

Step 1: Add the Custom Font Using @font-face

First, define your custom fonts inside the <style> section of your HTML email template.

For example, the following code loads Diodrum Bold and Diodrum Light from externally hosted .woff and .woff2 font files:

<style>
    
@font-face {
    font-family: 'Diodrum-Bold';
    src: url('https://raw.githubusercontent.com/MarinaDesign/email-fonts/main/Diodrum-Bold.woff') format('woff'),
         url('https://raw.githubusercontent.com/MarinaDesign/email-fonts/main/Diodrum-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Diodrum';
    src: url('https://raw.githubusercontent.com/MarinaDesign/email-fonts/main/Diodrum-Light.woff') format('woff'),
         url('https://raw.githubusercontent.com/MarinaDesign/email-fonts/main/Diodrum-Light.woff2') format('woff2');
}

</style>

Step 2: Apply the Custom Font to Your Email Content

Once the font has been defined, you can use it in your HTML email content with the font-family CSS property.

For example:

<tr>
    <td align="center" valign="top">
        <p style="font-family: 'Diodrum-bold', Arial, sans-serif; color: #000000; font-size: 18px; line-height: 29px; font-weight: bold; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-align:center;">How Early Engineering and Rapid Prototyping Can Accelerate Medical Device and Component Development</p>
    </td>
</tr>

Important: Match the Font Family Name

Make sure the font name used in font-family matches the name defined in @font-face.

For example, if you define:

font-family: 'Diodrum-Bold';

you should use:

font-family: 'Diodrum-Bold', Arial, sans-serif;

Avoid using a different capitalization or name such as Diodrum-bold, as it is best practice to keep the font-family name consistent throughout your email template.

Why Use Fallback Fonts?

Not all email clients support custom web fonts. If the recipient’s email client cannot load the custom font, the browser or email client will use the next available font in the list.

For example:

font-family: 'Diodrum-Bold', Arial, sans-serif;

This means:

1. Try to load Diodrum-Bold.
2. If it is unavailable, use Arial.
3. If Arial is unavailable, use the default sans-serif font.

Important Considerations for HTML Emails

Before using custom fonts in a production email campaign, test your template across the email clients you expect your recipients to use.

Custom font support varies between email clients, and some clients may ignore @font-face entirely. Therefore, always provide a suitable fallback font to ensure your email remains readable and visually consistent.

Conclusion

To use a custom font in an HTML email template, define the font with @font-face, provide the correct .woff or .woff2 source URLs, and apply the font using the font-family property.

For the best compatibility, always include fallback fonts such as Arial, Helvetica, or sans-serif and test your email template across multiple email clients before sending it.