Using web fonts and adding web safe fallback fonts in your emails

Custom web fonts are only supported on iOS/MacOS Apple Mail, so you can add font embeds for those, then set web safe fallback fonts to display all other email clients.

Currently, support for custom fonts in email clients is limited to Apple Mail on iOS/MacOS; so please be aware of this and try to design your emails with the "progressive enhancement" of custom fonts in mind.

Video Tutorial: Embed custom web fonts in HTML email exports from Figma

This video tutorial is a complete step-by-step guide showing you how to embed custom web fonts (with web-safe fallbacks) in HTML email exports from Figma using the Figma Emailify plugin.

Adding custom web font URL embeds ​

If you're using custom fonts, you'll need to add a link directly to the .woff or .woff2 font file URL, which you can do by clicking on the Configure Fonts button in the Preview panel of the plugin.

This will allow you to paste a link to each of the custom fonts used in your email designs (eg. https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), which will then be included as @font-face CSS rules in your exported HTML.

Please ensure you link directly to the .woff or .woff2 web font file; if you only have a link to a CSS embed, you can open that link in your browser, and you should see a url link to the font file in there (eg. https://fonts.cdnfonts.com/s/8766/SansThirteenBlack.woff), which you can then copy/paste into the plugin.

Custom Font Embeds are only supported on iOS/MacOS Apple Mail. Currently, support for custom fonts in email clients is limited to Apple Mail on iOS/MacOS, so please be aware of this and try to design your emails with the "progressive enhancement" of custom fonts in mind.

Setting and previewing web safe fallback fonts ​

If your using custom fonts in your emails, you can set a web safe fallback font for each custom font, which will be displayed as a fallback if the HTML email is being view in any email clients that don't support custom fonts.

You can specify fallback fonts for any Google Fonts and custom fonts under the same Configure Fonts settings panel, too.

If you've specified any web safe fallback fonts for custom web fonts in your email, you can preview how they will look by toggling the Show Fallback Fonts switch at the bottom of the Emailify preview window.

List of web-safe fallback fonts ​

Below are the different web-safe fonts you can set for any custom web fonts used in your Figma email designs; as custom font embeds are only supported on iOS/MacOS Apple Mail, specifying the fallback fonts below will determine which font is displays for all other email clients (eg. Outlook, Gmail, etc) which sadly don't support custom fonts.

Sans-Serif Web Safe Fallback Fonts ​

  • Arial
  • Arial Black
  • Tahoma
  • Trebuchet MS
  • Verdana

Serif Web Safe Fallback Fonts ​

  • Georgia
  • Times New Roman

Monospace Web Safe Fallback Fonts ​

  • Courier New

Using Google Fonts in your emails ​

Emailify automatically includes Google Font @import code in your HTML exports for any Figma layers that are using a font from the Google Fonts library that Figma includes by default.

Please note that Google Fonts will only be visible on any email clients that support the use of @font-face in emails, and a web safe fallback fonts (eg. "Arial", "Georgia" or "Courier") will automatically be loaded instead for any email clients that don't support custom fonts.

Google Fonts are only supported on iOS/MacOS Apple Mail. Currently, support for custom fonts in email clients is limited to Apple Mail on iOS/MacOS, so please be aware of this and try to design your emails with the "progressive enhancement" of custom fonts in mind.

Using custom fonts in your images. Please note that if you need to ensure a custom font is visually consistent across all email clients, it may be worth putting your text layers inside of an "Image" frame. This text content will be exported as part of the image itself, and therefore won't be relying on custom web font support to display correctly.