Use Custom Fonts in the Sparkforge Email Builder
Email client support for custom fonts is patchy — Apple Mail, iOS Mail, Samsung Mail, and Outlook.com render them; others fall back. Use @font-face inside an Outlook-safe @media wrapper and define a system-font fallback stack.
Custom fonts in HTML email work in some clients and not others. Building reliably means assuming the font will not load and ensuring the fallback stack still matches your brand voice.
Email Client Support
The following clients render custom fonts:
- Apple Mail
- iOS Mail
- Samsung Mail
- Outlook.com (web)
Everywhere else — Gmail, the Outlook desktop app, most webmail clients — falls back to system fonts. Plan accordingly.
Define a Font Stack
Always pair the custom font with system-font fallbacks so unsupported clients render cleanly.
font-family: 'OpenSansBold', Helvetica, Arial, sans-serif;Pick fallbacks that ship on most computers — Helvetica, Arial, Georgia, Times New Roman, Verdana, Tahoma.
Host the Font
Two options:
- Google Fonts or another hosted provider.
- Self-host the font files on your own server or CDN.
Sparkforge can host licensed fonts for customers, but only with proof of license.
Use @font-face
The most reliable embed pattern is @font-face inside a <style> block in the email head.
<style>
@font-face {
font-family: 'Festive';
src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap');
}
* {
font-family: 'Festive', cursive;
}
</style>Outlook 2007, 2010, and 2017 Workaround
These Outlook versions choke on raw @font-face declarations. Wrap the rule in an @media query so Outlook ignores it and falls back to the stack.
<style>
@media screen {
@font-face {
font-family: 'Festive';
src: url('https://fonts.googleapis.com/css2?family=Festive&display=swap');
}
}
</style>Test Before You Send
Custom fonts behave differently across clients and devices. Run the email through a preview tool that covers Apple Mail, Gmail, and the Outlook desktop client before you send to the list.
Frequently Asked Questions
Which email clients render custom fonts?
How do I make custom fonts work in Outlook?
Where should I host custom font files?
What fallback fonts should I pick?
Do custom fonts affect email deliverability?
Was this article helpful?
Thanks for the feedback.