I think there's like 20,000 fonts on this site. If we go to our web browser here, I've got this website loaded up called, and this has a bunch of different fonts. We've got the font set to the default Figma font, which is just 'Inter.' So we've got 'Inter' set on all of these layers, but we want to add some different fonts. This will load up a live HTML preview of your email so you can see it directly in the Figma plugin. If we go to our preview tab, just click on the preview button. So that's what the template's currently looking like. I'll just add those in for now, maybe add one more split block just so we got a bit of variation there, and we can apply some different fonts. I'll just add a couple more just to show you a few different font examples. I'm just going to add a few of these components here. Today, I'm just going to be focusing mostly on the text and showing you how to embed custom fonts and web-safe fallback fonts as well. You can obviously go through and change these to your liking, so you can swap out content, images, colors, styles, everything like that. I'm not going to customize them too much. I'm just going to add some of these predefined components. I'm just going to create a really, really simple template. This is a special type of frame that will allow you to add these Emailify components directly into your template. I'm going to call this template example and add that to my Figma file.

To get started, I'm just going to add a new template. Today, I'm really just going to be focusing much more on how to add custom web fonts and font fallbacks to your text layers inside of the email design. I'm not going to be going through all of the features there are more in-depth Emailify Figma tutorials on the YouTube channel if you want to get into detail about how to design the emails. I'm going to be showing you how to do that. If you're new to the Figma plugin, it helps you design HTML emails in Figma, and then you can export those to production-ready HTML with one click later. That's just going to run the Figma plugin we saved a second ago. I've already clicked on the save icon, so I'm just going to go to my canvas, right-click anywhere, go down to 'Plugins,' and then click on the 'Emailify' item. You can run the Figma plugin by either clicking on this 'Run' button here, or I'd recommend clicking on this little 'Save' icon here, which will save it to your Figma plugins list for later. Click on the little 'Resources' icon up here, and if you click on that and search for Emailify, then under the 'Plugins' tab, click on the Emailify result. To get started, all we need to do is go to our Figma file. Today I'm going to be showing you how to embed custom web fonts into your HTML emails with custom web-safe fallback fonts using the Emailify Figma plugin.

Export font from figma