How do web fonts vs system fonts behave?
Still have a question, spotted an error, or have a better explanation or a source we should cite?
You want to use a custom font in your email, so you upload it and write the CSS. Some subscribers see your beautiful custom font. Others see a boring fallback. That's because system fonts are pre-installed and load instantly, but web fonts have to be pulled from external servers. Many email clients block that download for security and privacy reasons.
And Here's the support landscape. Apple Mail and iOS Mail support web fonts. Gmail added support, though with some limitations. Outlook doesn't support them at all. Most Android clients offer partial support or none. That means a large chunk of your audience won't see your custom font no matter what you do.
The best practice is to use web fonts where they're supported, but define a fallback font stack for the clients that don't support them. Test how the fallback actually looks because most of your readers will see it, not the custom font. If you're serious about custom fonts, learn how to write @font-face CSS correctly. Then test web font support across your main clients so you know what your audience actually sees.
Contributors
Who worked on this answer
Every name links to their profile. Every company links to their site. Real people, real accountability.
