How to embed custom web fonts in HTML email exports from Figma using Emailify

Video Transcript

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.

To get started, all we need to do is go to our Figma file. 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. 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. 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. That’s just going to run the Figma plugin we saved a second ago.

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. I’m going to be showing you how to do that. 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. 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.

To get started, I’m just going to add a new template. I’m going to call this template example and add that to my Figma file. This is a special type of frame that will allow you to add these Emailify components directly into your template. I’m just going to create a really, really simple template. I’m just going to add some of these predefined components. I’m not going to customize them too much. You can obviously go through and change these to your liking, so you can swap out content, images, colors, styles, everything like that. 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.

I’m just going to add a few of these components here. I’ll just add a couple more just to show you a few different font examples. So there we go. 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. Okay, cool. So that’s what the template’s currently looking like.

If we go to our preview tab, just click on the preview button. This will load up a live HTML preview of your email so you can see it directly in the Figma plugin. There, it’s rendering as we’d expect. 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.

If we go to our web browser here, I’ve got this website loaded up called CDNfonts.com, and this has a bunch of different fonts. I think there’s like 20,000 fonts on this site. I’ve already downloaded and installed these two, so I’ve got this “Echelon” font and this “Spline Sans” font. I’m just going to apply those in Figma by going to my text layer, and if I search for that font, we’ve got this “Echelon” font there. I can select that one and adjust that size if I want to, so I can bump that up because the font’s a little bit smaller. I’ve also got this other font, “Spline Sans Mono,” so this is a monospaced font. I’m going to apply that to this layer here. So if we search for that one, we’ve got this new font, “Spline Sans Mono.” So I’m going to select that and apply that to a couple of these other layers as well. We can apply it to our content layers too. So I’ll just apply that one there and show you what that looks like.

The other thing I’m going to do is also apply a web-safe font to show you what that looks like. So, for example, a web-safe font would be something like “Arial.” So we’ll just select “Arial,” and I’ll show you why I’m selecting that in a second, just so we can compare these three different types of fonts.

Now that we’ve got those new fonts added, I’m just going to refresh my preview again, and you can see here, because I’ve got my custom fonts selected, those are now rendering in the email. So we’ve got these fonts here, and those are showing up because I’ve got them installed on my computer. Obviously, because we can select them in Figma, that means these are already installed at a system level. But when we send out the email, the users of our emails aren’t going to have that font installed necessarily. It’s a very low chance that they would. So what we want to do is embed the font links or custom font URLs into the email so that when we send out the email, the clients that support custom emails will be able to see those fonts.

I’m going to show you how to do that now. So if you go down to this little “Configure Fonts” button at the bottom of the preview window, I’m just going to click on that “Configure Fonts” button now. You can see here that we’ve got a few different options. We’ve got a list of our fonts. So you can see we’ve got our “Echelon” font, the “Inter” font, “Spline Sans Mono,” and “Arial.” These are all the fonts that are being used in our current email. So those are automatically going to get listed in this little window here.

We can do a couple of different things. The first thing we can do is specify a fallback font. A fallback font is going to appear if the email client that the user is reading your email with doesn’t support custom fonts. This is a very important point. There’s only a handful of clients that actually support custom web fonts in emails. If you click on this little link here, that will take you to the “Can I email” page here, which will show you the support level for custom fonts.

You can see here it’s mostly Apple Mail, so Mac OS, iOS, the Apple Mail app. Gmail doesn’t support them at all. Outlook really doesn’t support them at all, unless you’re on Mac OS, and then they do. But otherwise, it doesn’t really support them. And again, other random clients like Samsung Email, Thunderbird, and a few other random email clients down here. But overall, the support is very low. So this is the reason why we want to add fallback fonts.

In this case, we’ve got this “Echelon” font, and it’s kind of a bulky font. So what we want to do is select a web-safe font that is close to that. I know that we can change this to different sans-serif fonts here, but these are all fairly thin. So I’m going to select the “Impact” font, which you can see a preview of here, which is somewhat closer to the custom font that we’re using here. So I’m going to leave that one as “Impact.”

Then I’m going to go down here, and for our “Inter” font, which is a Google font, I’m just going to set the fallback for that one to “Helvetica.” You could also use “Arial”; “Arial” will be the default. So I’m just going to use “Helvetica” in this case. You can see there’s a little note here saying that Google font URLs are automatically embedded. So what that means is if you’re using a font in Figma that’s part of the Google Fonts range, so fonts.google.com are all the Google fonts, those will automatically be detected, and the embed URLs will be included automatically.

For our other custom font up here, we’ve got this “Echelon” font. What we need to do is actually populate this little input here with a link to the custom font file. As I mentioned before, because the users aren’t going to have the font installed, we need to embed that web font directly into the HTML itself. The way we can do that is if we go back to our CDNfonts.com page, and you can see here, it’s got some links to the font. So I’m just going to open up those links. You can see I’ve copied that URL here, and we’re not going to be copying this content here.

What we want to do is open up the page that it’s linking to, which is this one. And we want to grab a link to the WOFF file. So that’s WOFF is the font file. So I’m going to highlight that link. I’m just going to copy it to my clipboard, and I’m going to go back to Figma and paste that in here. So where it’s got the little link field, I’m going to paste that in, and you can see we’ve now pasted in a link directly to the WOFF font file. So this is the custom font file. So you want to make sure that’s the correct font for the font that you’re loading up here.

And you can see down here we’ve got another one for “Spline Sans Mono.” First of all, I’m just going to set the fallback font to a monospaced fallback font. So we’ve got some monospaced fonts here. If I select that, you can see that it’s changing to a monospaced type font, which is much more similar to the monospaced custom font we’re using. You can pick whichever you feel suits best. I’m just going to use “Courier” for this one. And again, we’ve got two different variants for this font. So we’ve got “Spline Sans Mono Bold” and “Spline Sans Mono Regular.”

If we go back to our link here, we’ve got our “Spline Sans” page. Just going to copy-paste that link again, open that up here, and what you want to do is copy-paste these fonts again. So I’m just going to copy-paste that into here, and I’m just going to make this one italic. So this one will be italic. And I’m just going to refresh that. So if we go back here and jump back in, I’m just going to refresh this little “Configure Fonts” thing, and that will load up the mono italic font, which is actually the one that I want to embed. So I’ve got the regular one, which is here, and then I’ve got the italic one here. So I’m going to copy-paste that into my italic field, and now we’re good to go.

You can see here I’ve got my, again, just a recap, I’ve got my two custom fonts, which we have to specify the links to the file to. You might have this hosted on your own website. So if you’ve got a custom font that isn’t on a CDN, most of them are, but if you’re hosting your own, you’ll paste your own WOFF link into here. It might be a WOFF2 file. And then you’re obviously going to set those font fallbacks. So you want to do that for all of your custom fonts.

At the bottom here, you’ll notice that the Arial font is already a web-safe font. So you’ll remember that we set the Arial font on these layers, and because that’s already a web-safe font, we don’t need to specify a fallback font or a custom embed link for those ones. So those are the three types: web-safe fonts, totally custom fonts, and custom Google fonts.

Now that we’ve run through those, I’m going to go back to my preview and close that off. This is going to refresh the preview, and you can see here that we’ve got this other toggle called “Show Fallback Fonts.” So I’m going to toggle that “Show Fallback Fonts” on, and what that does is it allows us to preview the email with the fallback fonts only. So you can see here that we’ve got our “Courier” font, our “Impact” font, and down here, we’ve also got the “Courier” font set. So what that’s doing is essentially taking the fallback fonts that we specified under these dropdowns like these ones and it’s previewing the email, showing you what the email is going to look like for an email client that doesn’t support custom fonts.

As we showed before, there’s only a handful of clients that do support custom fonts. So for the majority of users, people on Gmail, people on most Outlook versions, this “Show Fallback Fonts” toggle enabled is actually what they’re going to end up seeing. You want to be really mindful about how the email is going to look to most of those users, most of your users, in fact, depending on what devices they’re using, and you want to make sure those fallbacks are set to something that is going to still look nice. So if they don’t support the custom monospace font here, it will automatically fall back to “Courier.” So that’s what that looks like there.

The other thing to note is that if you did want to make sure that the custom font is loaded, you would basically have to embed that into an image. So for example, if we took this text layer here and dropped it into an image layer, so if we drop that inside of an image itself, I’ll just bump that down a little bit so we can actually see the content. If you embed text into an image, that will obviously get included inside the image as part of the image. So if we refresh the design here and have a look at that, you can see that the image itself has the custom font in it. So even with the fallback font toggle, obviously that’s not going to affect it because it’s just purely an image. So if you really do need a custom font guaranteed to render correctly or visually correctly, then you might want to consider using it as part of a design element inside of an image layer. So anyway, that’s what that looks like there, and of course, you can configure these to be any kind of fallbacks you want.

If, for some reason, you wanted the monospace font custom font to actually just fall back to a very regular type of font, like a Sans serif font, you can set that to be Sans serif as well. And if we close that off and refresh that, you can see here we’ve just updated it. So, without the fallback font enabled, if the custom font can be supported, you’ll get the custom monospace font. Or if you don’t have the support for custom fonts, and we show those fallback fonts again, you can see that now it’s reverting to aiel. So, it’s totally up to you. I would keep it consistent and try to keep it in the same font family. So, in this case, I would set it to something like Courier, and you can load it up like that. And it’ll be fairly close to the original font. So, that’s what that looks like. So yeah, that’s basically it. I just wanted to run you through the different options that you have for embedding custom fonts, setting fallback fonts, which again are very important, being very, very mindful of the support level being quite low for custom fonts. So, keeping them as more of a progressive enhancement.

And when you’re finished with your email design, just as a last step, if you close out of the preview and you want to actually export the email, you can do that instantly by clicking on the export HTML button up here and selecting the platform. So, you can either just download it to your computer as an HTML .zip file, or if you’re using a marketing platform, you can select one of those here. If you’re using something like Klaviyo, you can drop your API key in there and upload it. In this case, I’m just going to do a really quick export to HTML. You can set your subject line and preator here if you want, and I’m just going to export it to HTML in this case, generate that HTML, export the images, and then download the zip file to your computer. So, if you click on that button and then just save that to your computer.

I’m just going to save it to my desktop, and if I unzip that file, open up the folder, you can see here that the HTML has been exported to this file here. So, we can see what that looks like if we open up the preview HTML file. This will just give us a nice little preview overview. This is good if you want to send it to clients. It’ll give you a desktop version and mobile view that you can preview in the browser. And we can see here that our custom fonts are being loaded in as we’d expect. So that’s looking really nice. And then the actual email template itself is in this other index file here. So, the real template export is this index.html file inside of the nested folder in your zip file. So, that’s the raw HTML that’s going to load up your content. So, that’s what your exported HTML looks like there. Again, you can’t preview the fallback fonts now because we’ve already got the custom fonts installed on our computer. But if you were to open this email in your email client like Outlook or Gmail, you would see the fallback fonts that we previewed in our HTML preview over here, just with that toggle turned on in Gmail or Outlook, you would see these fonts instead of the custom fonts. So always be sure to test out the emails in those clients before you send it out. But yeah, this is what the fonts are going to look like with the fallbacks enabled.

Thank you for walking through this Figma tutorial. I hope that’s been helpful if you’ve been wondering how custom fonts work inside of HTML. It’s a little bit more complicated than a website, for example, because of the support level being so varied as we looked at in the can I email list. But if you do want to use the custom fonts as more of a progressive enhancement for your email designs, then you can now do that using this configure fonts option in the Emailify Figma plugin and set those fallback fonts as well.

That’s going to give you a little bit more design flexibility if you need to use your own custom third-party web fonts for your own brand design guidelines. Just make sure that you have that hosted somewhere and be sure to drop in that link into this field here. Otherwise, the email obviously won’t load up that font. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.