You Kinda Can Use Custom Fonts in HTML Emails

Avatar of Chris Coyier
Chris Coyier on (Updated on )

And you use them pretty much just like you’d use custom fonts on a website. Jaina Mistry had the scoop on this last year over on the Litmus blog:

While web fonts don’t have universal support, here are the email clients where they are supported:

  • AOL Mail
  • Native Android mail app (not Gmail app)
  • Apple Mail
  • iOS Mail
  • Outlook 2000
  • Outlook.com app

Aside from using a JavaScript font loader, which definitely won’t work in email (no email client will be executing JavaScript), ultimately it comes down to @font-face in CSS. So let’s do that.

Say we wanted to use Lato in an email, if we can. Go do the normal Google Fonts thing and find the URL for loading Lato. If you just visit that URL, you can see it’s loading Lato over @font-face, and you can totally snag that code:

In your HTML template, you’d put that into a <style> block in the <head>, as well as set the font-family:

<style type="text/css">
@media screen {
  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  }

  ...

  body {
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  }
</style>

Notice there are some fallback fonts set there. Might as well fall back to some Lato-like fonts, if we can.

Here we can see this working in the Litmus Builder:

But just to make sure, we’ll have to blast it to some actual email clients and see what happens:

✅ Lato in Apple Mail 10
🚫 Lucida Grande in Outlook 2007 (and 2010)
✅ Lato on iPhone 6
🚫 Droid Sans on Android Gmail
🚫 Lucida Grande in Gmail on Web

I think the way to think about it is: some do, some don’t, meh, kind of a cool progressive enhancement to help match your brand.