Does CSS system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospace Work in HTML Email?
CSS keywords for specifying system fonts for `font-family`.
Does system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospace work in HTML email?
The CSS system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospace property is supported in Gmail, Outlook (Mac / Web), Apple Mail, Yahoo! Mail, and others. It is NOT supported in Outlook (Windows). Always include a safe fallback for unsupported clients.
Which Email Clients Support CSS system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospace?
CSS support for system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospace across email clients
| Email Client | Desktop | Mobile / Web | Notes |
|---|---|---|---|
| Gmail | ✓ Yes | ✓ Yes | — |
| Outlook (Windows) | ✗ No | ? | — |
| Outlook (Mac / Web) | ✓ Yes | ✓ Yes | — |
| Apple Mail | ✓ Yes | ✓ Yes | — |
| Yahoo! Mail | ✓ Yes | ✓ Yes | — |
| Samsung Email | ? | ~ Partial | — |
| Thunderbird | ~ Partial | ? | — |
| ProtonMail | ✓ Yes | ✓ Yes | — |
| Fastmail | ✓ Yes | ? | — |
Notes
- #1 Partial. Supports `system-ui` only.
- #2 Partial. Depends on browser support. `system-ui` works in all browsers. `ui-serif`, `ui-sans-serif`, `ui-rounded` and `ui-monospace` are supported on all browsers on iOS and Safari on MacOS.
Frequently Asked Questions
Related CSS Properties
Test Your Email Now
Paste your HTML and see how it renders in clients that don't support system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospace.
Building a new email instead of checking an existing one? MailViewr's Email Builder only lets you use CSS that's known to render across clients, so system-ui, ui-serif, ui-sans-serif, ui-rounded, ui-monospace can't sneak into your markup by accident. Open the Email Builder →