Who This Is For / When to Use
This article is for users creating branded HTML email templates who need to use fonts beyond the default system fonts.
Email Client Support for Custom Fonts
Custom font support varies by email client.
Supported email clients:
Apple Mail
iOS Mail
Samsung Mail
Outlook.com
Important: Many email clients do not support custom fonts. Always define fallback fonts to ensure readability.
Define a Font Stack (Required)
A font stack ensures your email displays correctly when custom fonts are not supported.
Example font stack:
'OpenSansBold', Helvetica, Arial, sans-serif
Fallback fonts should be widely available system fonts.
Reference for fallback stacks: https://www.cssfontstack.com/
Add Custom Fonts Using Google Fonts
You can load Google Fonts directly using CSS.
Recommended approach: Use @font-face inside a <style> block.
Example CSS:
<style>
@font-face {
font-family: 'Festive';
}
* {
font-family: 'Festive', cursive;
}
</style>
Add Custom CSS in the Email Builder (Design System)
Use the Appearance tab to add global CSS for your email template.
Steps:
Open the Email Builder.
Click the Appearance icon.
Expand Custom CSS.
Paste your
<style>block.Click Save.
Add Custom Code in Workflow Emails
When using the Email Builder inside a workflow, you can insert custom code directly into the message editor.
Steps:
Open the workflow email step.
Click the <> (HTML) icon.
Paste your custom font CSS.
Add Fonts Directly in the Builder Font Manager
Kyrios also supports adding fonts through the font selector when available.
Steps:
Open a text element.
Open the font dropdown.
Click Add font.
Select a Google Font and confirm.
Outlook Compatibility Requirements
Outlook versions 2007, 2010, and 2017 do not fully support @font-face.
Required workaround: Wrap @font-face rules in a @media query.
Failure to do this may cause Outlook to ignore the custom font entirely.
Use Custom Fonts via Custom Values (Optional)
If you want to reuse custom font code:
Create a Custom Value containing your
<style>block.Insert the Custom Value into your email.
This allows consistent font usage across multiple templates.
Common Issues and Fixes
Font does not display
Ensure the email client supports custom fonts and fallback fonts are defined.
Font works in preview but not inbox
Preview tools may not match real email client behavior. Always send test emails.
Outlook ignores custom font
Wrap @font-face inside a @media query and include system fallbacks.
FAQ
Which email clients support custom fonts?
Apple Mail, iOS Mail, Samsung Mail, and Outlook.com support custom fonts. Other clients rely on fallback fonts.
How do I add a custom font to an email template?
Add a <style> block with @font-face inside the Appearance tab or via custom HTML in workflow emails.
What happens if a custom font isn’t supported?
The email will render using the fallback fonts defined in the font stack.
Can I use Google Fonts in emails?
Yes. Google Fonts can be loaded using @font-face, with proper fallback fonts included.
Why is Outlook font rendering inconsistent?
Outlook 2007, 2010, and 2017 do not support custom fonts unless wrapped in a @media query.
Can I use custom fonts in subject lines?
No. Subject lines are controlled by the recipient’s operating system and do not support custom fonts.