← Back to Emailify Video Tutorials

What this video covers

This tutorial shows how to use the Emailify Figma plugin to add custom web fonts to HTML email designs and assign web-safe fallback fonts for unsupported email clients. It also shows how to preview those fallbacks in Emailify and export the finished email as HTML.

Things you'll need

• The Emailify Figma plugin
• Custom fonts installed locally in Figma for design work
• A hosted WOFF or WOFF2 font file URL for any custom font you want to embed

Steps

1. Open Figma, find Emailify in Resources, and run or save the plugin from the Plugins menu.
2. Add a new Emailify template and place a few text components to use different font examples.
3. Apply fonts in Figma, including custom fonts like Echelon and Spline Sans Mono, plus a web-safe font such as Arial.
4. Open the preview tab, then click Configure Fonts to see the list of fonts used in the email.
5. Set fallback fonts for the custom fonts, and paste the direct WOFF font file URL for each custom font; Google Fonts are embedded automatically.
6. Toggle Show Fallback Fonts to preview how the email will look in clients that do not support custom web fonts.
7. When finished, click Export HTML to download the HTML .zip file and inspect the exported index.html and preview files.

Useful links

• Watch the full video on YouTube
• Read the full video transcript
• Read: Using web fonts and adding web safe fallback fonts in your emails
• Next: Add dark mode styles to HTML email designs
• Open Emailify in the Figma Community