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.

​
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.

​
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.

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.

Was this page helpful?

Dark ModeHover States