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.
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.
.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.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.
Was this page helpful?