Gmail Email Quirks

Issue

Gmail filters out CSS rules that don't apply to inline elements or common attributes. This means unused CSS in <style> tags gets stripped.

Workaround

Make sure all your CSS rules are actually used in the email HTML. Remove unused selectors and styles.

Code Example

/* ❌ BAD: Style not applied to any element */
<style>
  .unused-class { color: red; }
</style>

/* ✓ GOOD: Style applied to elements in email */
<style>
  .header { color: red; }
</style>

Issue

Web fonts work in Gmail only when displayed via HTML rendering. They don't work in the Gmail app or some older versions.

Workaround

Always provide fallback web-safe fonts. Use system font stacks as a backup.

Code Example

/* ✓ GOOD: Proper font stack with fallbacks */
body {
  font-family: 'Custom Font', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

Issue

Background images work in Gmail on desktop and most mobile clients, but may fail in some versions.

Workaround

Test background images thoroughly. Consider using VML or background gradients as fallbacks.