This article explains how fonts work in email templates, the limitations of using custom fonts, and best practices to ensure emails look polished across all clients.
Why Email Fonts Work Differently
Fonts in email templates are not as flexible as fonts on websites because email clients prioritise simplicity and security. Here are the key points:
1. Email Client Limitations:
– Many email clients, including Gmail and Outlook, do not support externally hosted or Google Fonts.
– Instead, they use fallback fonts (e.g., Arial, Verdana) that are pre-installed on the recipient’s device.
2. Supported Email Clients:
– Apple Mail (macOS and iOS) and Thunderbird support hosted or Google Fonts.
– Gmail, Outlook (desktop and web), and Yahoo Mail do not support these fonts.
3. Fallback Fonts:
– If the specified font is unavailable, the email client defaults to a fallback font in the font-family stack.
– Example: font-family: 'Roboto', Arial, sans-serif;
XpoBay’s Default Font Settings
Default Email Font: XpoBay uses Verdana as the standard font for email templates. This ensures consistency and compatibility across all email clients.
Event Pages: While the default font for event pages is also set, organisers have the option to customise fonts from the available list within the event portal branding settings.
However, email templates are restricted to the default settings to maintain reliability in different email clients.
Using Custom Fonts in Email Templates
While most email clients do not support custom fonts, you can still attempt to use them by following these steps:
1. Host the Font:
– Ensure the proprietary font files are hosted on your website or another accessible server.
– Example file URLs:
https://yourwebsite.com/fonts/custom-font.woffhttps://yourwebsite.com/fonts/custom-font.woff2
2. Include Fallback Fonts:
– Always define a stack of fallback fonts to maintain a professional appearance when the primary font isn’t supported.
– Example: font-family: 'CustomFont', Arial, sans-serif;
3. Verify Font File Locations:
– Check that the hosted font URLs remain consistent, even after website updates or rebranding.
4. Share Hosted Font Links:
– Provide the hosted font URLs to XpoBay support for integration into your email template.
Challenges and Limitations
– Many email clients do not support hosted or Google Fonts.
– Custom fonts will only display reliably for approximately 20% of email recipients, primarily those using Apple devices or certain email clients.
Best Practices for Fonts in Email Templates
1. Stick to Web-Safe Fonts:
– Use fonts like Arial, Verdana, Helvetica, or Times New Roman to ensure consistent rendering across all email clients.
2. Provide Fallback Fonts:
– Always define a fallback font stack to maintain a professional appearance when the primary font isn’t supported.
– Example: font-family: 'Open Sans', Arial, sans-serif;
3. Test Thoroughly:
– Use tools like Litmus or Email on Acid to preview emails in different clients and devices.
4. Understand the Limitations of Custom Fonts:
– Custom fonts, even when hosted or from Google Fonts, will only display in a minority of email clients.
– Plan your email design assuming that most recipients will see fallback fonts.
Custom fonts can be used with limitations, but web-safe fonts and fallback stacks are recommended for consistent results.