Using Custom Fonts
Follow these guidelines when using non-standard fonts in your emails.
Use Web-Safe Fonts as Fallbacks
Always specify a web-safe font as a fallback in case the custom font does not load.
Common web-safe fonts include Arial, Verdana, Georgia, and Times New Roman.
Host Fonts Appropriately
Host the fonts on a reliable server or use a service like Google Fonts or Adobe Fonts.
Ensure that the font files are compressed (e.g., WOFF or WOFF2 format) to minimize loading time.
Use Inline CSS for Font Integration
Apply custom fonts using inline CSS within the <style> tag or directly within HTML elements.
Example:
<style> @font-face { font-family: 'CustomFont'; src: url('https://your-server.com/fonts/customfont.woff2') format('woff2'); } .custom-text { font-family: 'CustomFont', Arial, sans-serif; } </style> <p class="custom-text">This is custom font text.</p>
Test Across Multiple Email Clients
Different email clients render fonts differently. Test emails across popular clients to ensure the custom font displays.
Pay attention to mobile clients as well.
Limit the Use of Custom Fonts
Use custom fonts sparingly, reserving them for headers or branding elements.
For longer bodies of text, use standard web-safe fonts.
Consider Email Load Times
Custom fonts can increase the size of the email, which might affect load times. Ensure the font files are as small as possible.
Keep the total email size under 102KB to avoid clipping in some email clients.
Ensure Legal Compliance
Verify that you have the correct licensing to use and distribute the font in emails.
Monitor Email Deliverability
Custom fonts can sometimes cause deliverability issues. Monitor open rates, click rates, and spam reports.
Fallback on System Fonts in Case of Issues
If any issues arise, be prepared to revert to system fonts to ensure the email remains functional.