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

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

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.

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 sadlydon't support custom fonts.

Sans-Serif Web Safe Fallback Fonts ​

  • Arial
  • Helvetica
  • Verdana
  • Tahoma
  • Trebuchet MS
  • Impact
  • Gill Sans
  • Arial Black

Serif Web Safe Fallback Fonts ​

  • Georgia
  • Times New Roman
  • Palatino
  • Baskerville

Monospace Web Safe Fallback Fonts ​

  • Courier
  • Lucida
  • Monaco
  • Andalé Mono

Cursive Web Safe Fallback Fonts ​

  • Bradley Hand
  • Brush Script MT
  • Comic Sans MS

Fantasy Web Safe Fallback Fonts ​

  • Luminari

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.