Typography

Getting your fonts to look right across every email client can feel like herding cats. You design something beautiful in Figma, export it, and then Outlook decides “Actually, Times New Roman would look great here.”

This guide will help you set up your typography properly so your emails look consistent—or at least gracefully degrade—across Apple Mail, Gmail, Outlook, and everywhere else your subscribers are reading.

Here’s the hard truth: custom web fonts only work reliably in Apple Mail on iOS and macOS. That’s it. Every other email client will fall back to web-safe fonts.

This isn’t a limitation of the Email Love plugin—it’s just how email works. So the goal isn’t pixel-perfect fonts everywhere. It’s designing with “progressive enhancement” in mind: your email looks great with custom fonts where supported, and looks intentionally good everywhere else.

These fonts are installed on virtually every device, so they render consistently across all email clients:

Sans-Serif: 

- Arial

- Arial Black

- Tahoma

- Trebuchet MS

- Verdana

Serif: 

- Georgia

- Times New Roman

Monospace: 

- Courier New

If you need guaranteed consistency, stick with these. They’re not exciting, but they’re reliable.

Good news: the plugin automatically includes the @import code for any Google Fonts you use in Figma. No extra setup required.

Bad news: they’ll only display in clients that support @font-face (primarily Apple Mail). Everyone else sees your fallback font.

Using a font that isn’t from Google Fonts? You’ll need to add the font URL manually in the plugin settings. More on that below.

You’ll see a list of all the fonts used in your email design.

If you’re using custom fonts (not Google Fonts), you need to link directly to the .woff or .woff2 font files.

What to paste: A direct URL to the font file, like:

What NOT to paste: A link to a CSS file or a font specimen page.

If you only have a CSS embed link, open it in your browser. You’ll see something like this in the code:

Copy that URL inside the url() and paste it into the plugin.

This is the critical step most designers skip.

For each custom font, specify which web-safe font should display when custom fonts aren’t supported. This prevents the dreaded “Times New Roman surprise” in Outlook.

In the Configure Fonts panel: 1. Find your custom font in the list 2. Select a web-safe fallback from the dropdown 3. Match the vibe: sans-serif fonts should fall back to sans-serif (like Arial or Verdana), serif fonts to serif (like Georgia)

Pro tip: Choose fallbacks with similar x-heights and character widths to your custom font. Montserrat → Arial is a solid pairing. A geometric sans like Futura might work better with Verdana.

Before exporting, see how your email will look for Outlook users:

If you’re creating more than a handful of emails, don’t style your text manually on each layer. Use Figma’s Text Styles instead.

Why this matters: When you link all your text to Text Styles, you can update fonts across your entire design system in one place. Change your body font from Inter to Open Sans? Update the style once, and every email template updates automatically.

How to set it up:

Recommended styles to create: - Headings: H1, H2, H3 (with appropriate sizes and weights) - Body: Regular, Bold, Small - Links: Default link styling - CTA: Button text - Caption/Legal: Smaller text for footers

Now when you’re designing, select from your Text Styles instead of manually setting font properties. Your whole team stays consistent, and font changes become a one-click update.

If you’re on a newer version of Figma, you can take this further with Variables. Create “Type Primitives” for your base font families and weights, then reference them in your Text Styles.

The setup: 1. Create variables for font families (e.g., font/primary, font/secondary) 2. Create variables for weights using numeric values (400, 700) rather than names like “Medium” 3. Scope your primitives so designers only see the final Text Styles in the picker—not the raw variables

This approach is particularly useful when you’re pairing fonts that use inconsistent weight naming. A numeric 400-700 scale keeps things standardized.

Pro tip: If you’re building a full email design system, scope your primitive variables away from the font picker. Edit the variable, untick “Show in all supported properties,” and designers will only see your polished, ready-to-use Text Styles. Keeps things clean.

This is huge. Outlook clips text based on fixed container heights. If your text box in Figma is set to “Fixed Size,” the exported HTML will have a fixed-height container that Outlook may truncate.

Fix: Select your text layers and change them from “Fixed Size” to “Auto Height” in Figma’s text settings.

Tight line-heights that look fine in Figma can cause text overlap or clipping in email clients.

Best practice: Use a line-height ratio of 1.5x to 2x your font size.

Instead of relying on Figma’s “Regular” or “Medium” labels, think in terms of numeric weights:

This helps when you’re pairing fonts that use different naming conventions.

For body copy, stick to 14px minimum, though 16-18px is better for readability on mobile devices. Headlines can go smaller if needed, but body text below 14px is hard to read on phones.

Outlook on Windows uses Microsoft Word’s rendering engine. It doesn’t recognize custom fonts and often ignores your fallback stack entirely, defaulting to Times New Roman.

The plugin handles this automatically by adding Microsoft-specific CSS that forces Outlook to use your specified fallback font. But you need to actually set those fallbacks in the Configure Fonts panel—the plugin can’t read your mind.

Sometimes you absolutely need your brand font to display exactly right. In those cases, consider putting that text in an “Image” frame in Figma.

The text will export as part of the image itself, so your custom font will display perfectly across all email clients.

Trade-offs: 

- ✅ Perfect font rendering everywhere

- ❌ Not accessible to screen readers -

- ❌ Can’t be selected or copied

- ❌ Increases email file size

- ❌ Won’t scale if images are blocked

Use this sparingly—maybe for a logo or a key headline, not for body copy.

“My custom font isn’t showing up anywhere” → Check that your font URL is a direct link to a .woff or .woff2 file, not a CSS stylesheet.

“My text is getting cut off in Outlook” → Switch your text boxes from Fixed Size to Auto Height in Figma. Also increase your line-height.

“Outlook is showing Times New Roman” → You probably haven’t set a fallback font. Go to Configure Fonts and assign web-safe fallbacks.

“The spacing looks different in the preview vs. Figma” → Different fonts have different metrics. Preview with fallback fonts enabled to see what most users will actually see.

“My font looks bold in Figma but regular in the export” → Make sure you’re using a font file that includes the weight you want. Some fonts need separate files for Regular, Bold, etc.

Need more help? Reach out to support@emaillove.com.