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.

Select and preview 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.

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 fallback websafe font (eg. "Arial", "Georgia" or "Courier") will automatically be loaded instead for any email clients that don't support custom fonts.