---
url: "/emailify/tutorials/embed-custom-web-fonts-in-html-email-exports-from-figma.md"
description: "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."
---

# Embed custom web fonts in HTML email exports from Figma

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

[← Back to Emailify Video Tutorials](/emailify/tutorials)

[Embedded media](https://www.youtube-nocookie.com/embed/dtTNDXeO3FA)

## 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](https://www.youtube.com/watch?v=dtTNDXeO3FA)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-embed-custom-web-fonts-in-html-email-exports-from-figma-using-emailify)
- [Read: Using web fonts and adding web safe fallback fonts in your emails](/emailify/design/fonts)
- [Next: Add dark mode styles to HTML email designs](/emailify/tutorials/add-dark-mode-styles-to-html-email-designs)
- [Open Emailify in the Figma Community](https://www.figma.com/community/plugin/910671699871076601)