Webfont support in email

February 27th, 2015 by Anna Yeaman

While trying to find out which webfont services are compatible with email, one type foundry mentioned that their license only covers certain font formats. I believe it was WOFF, EOT and SVG, but not TTF or OTF as they are considered desktop formats. As each format has varying browser support, they asked if this would give us enough coverage in email.

Although I knew WOFF was the emerging standard with a W3C Recommendation, I hadn’t looked closely at email client support for each format. So we ran some tests in the device lab - view full QA - using the four formats Google Fonts currently serves: EOT, TTF, WOFF2 and WOFF.

 

@font-face support by format & method

Part of the Android QA
Using the Google font Orbitron, we tested each format with @font-face directly in the head, via @import and <link>. If using the later two, Google Fonts automatically serves the right font format to the right browser. Placing the code directly into the head takes more work, we opened up the Orbitron link in various browsers to collect each URL. All three of these methods ultimately rely on @font-face support. If you open up the @import or <link> url, you’ll see the @font-face code that corresponds to your browser.

 

Web clients: EOT in head TTF in head WOFF2 in head WOFF in head All in head1 @import <link>
AOL IE11 No No No Yes Yes No No
Desktop: EOT in head TTF in head WOFF2 in head WOFF in head All in head1 @import <link>
Outlook Express 6 Yes No No No Yes Yes Yes
Outlook 2000 Yes No No No Yes Yes Yes
Outlook 2002 Yes No No No Yes Yes Yes
Outlook 2011 (Mac) No Yes No Yes Yes Yes Yes
Outlook 2015 No Yes No Yes Yes Yes Yes
Apple Mail 6 No Yes No Yes Yes Yes Yes
Apple Mail 7 No Yes No Yes Yes Yes Yes
Apple Mail 8 No Yes No Yes Yes Yes Yes
Lotus Notes 8 Yes No No No Yes Yes Yes
Thunderbird No Yes No Yes Yes Yes Yes
iOS iPhone / iPod: EOT in head TTF in head WOFF2 in head WOFF in head All in head1 @import <link>
iPod 8.1.3 native No Yes No Yes Yes Yes Yes
iPod 8.1.3 Outlook No Yes No Yes Yes Yes Yes
iPod 8.1.3 Mailbox No Yes No Yes Yes Yes No
iPod 8.1.3 Sparrow No Yes No Yes Yes Yes Yes
iPod 6.1.3 native No Yes No Yes Yes Yes Yes
iPod 5.1.1 No Yes No Yes Yes Yes Yes
iPod 4.3.5 No Yes No No Yes Yes Yes
iOS iPad: EOT in head TTF in head WOFF2 in head WOFF in head All in head1 @import <link>
iPad Mini 8.1 No Yes No Yes Yes Yes Yes
iPad 7.0 (retina) native No Yes No Yes Yes Yes Yes
iPad 7.0 (retina) Molto No Yes No Yes Yes Yes Yes
iPad 4.3.5 (non-retina) No Yes No No Yes Yes Yes
Android (native): EOT in head TTF in head WOFF2 in head WOFF in head All in head1 @import <link>
Motorola Deft, Froyo 2.2.2 No Yes No No Yes Yes Yes
Samsung Galaxy Ace, GB 2.3.6 No No No No No No Yes
Galaxy Note, GB 2.3.6 GB No No No No No No Yes
Samsung Galaxy Nexus, ICS 4.0.4 No Yes No No Yes Yes Yes
Outlook.com app No Yes No No Yes Yes Yes
Galaxy S2, Jellybean 4.1.2 No Yes No Yes Yes Yes Yes
Android native, Jellybean 4.2 No Yes No No Yes Yes Yes
S4, Jellybean 4.3 No Yes No Yes Yes Yes Yes
Nexus 7, KitKat 4.4.2 No Yes No Yes Yes Yes Yes
Kindle: EOT in head TTF in head WOFF2 in head WOFF in head All in head1 @import <link>
Kindle Fire 7″ original No Yes No No Yes Yes Yes
Kindle Fire 7″ HD No Yes No No Yes Yes Yes
Preview tool: EOT in head TTF in head WOFF2 in head WOFF in head All in head1 @import <link>
Litmus View View View View View View View
Note: 1. All in head includes EOT, TTF, WOFF & WOFF2

 

Font formats

WOFF has wide support in modern browsers, with TTF filling in some gaps on mid-range Android. EOT is IE only which is why it renders in older Outlook, not essential but it doesn’t hurt. WOFF2 support is currently limited to Chrome 36+ and Opera 23+, so its usefulness in email is negligible right now. Though it is something to monitor, as WOFF2 file sizes are ~30% smaller than WOFF.

Outside of Google Fonts you may also encounter SVG, I’ve seen it used in webfont stacks to catch legacy iOS. SVG is the only format supported in iOS pre 4.2, after which TTF then WOFF kicks in. Currently 97% of iOS users are on version 7 or 8, so I can see why Google Fonts omit it. Though if you are not given the option of a TTF file, SVG may fill in some gaps.

 

@font-face directly in the head

@font-face {
font-family:'Orbitron';
font-style: normal;
font-weight: 400;
src:url('http://fonts.gstatic.com/s/orbitron/v6/qhIa0Jl7ziRjUBxIWMni1_esZW2xOQ-xsNqO47m55DA.eot?#iefix');
src:url('http://fonts.gstatic.com/s/orbitron/v6/qhIa0Jl7ziRjUBxIWMni1_esZW2xOQ-xsNqO47m55DA.eot?#iefix') format('eot'),url('http://fonts.gstatic.com/s/orbitron/v6/HmnHiRzvcnQr8CjBje6GQvesZW2xOQ-xsNqO47m55DA.woff2') format('woff2'),url('http://fonts.gstatic.com/s/orbitron/v6/94ug0rEgQO_WuI_xKJMFc_esZW2xOQ-xsNqO47m55DA.woff') format('woff'), url('http://fonts.gstatic.com/s/orbitron/v6/lVErvynhvxLufD6jW6vDo_esZW2xOQ-xsNqO47m55DA.ttf') format('truetype');
}

While support via this method is greater than previous tests with just WOFF, Android 2.3 still isn’t supported. You also need to obtain the URLs from each browser, which Ilya Grigorik of Google told me they make no guarantees will persist over time. Though you can always self-host.

Ilya recommends the dynamic CSS route via @import or <link>, as Google rev font versions whenever new improvements are available as well as other refinements. “We apply a lot of UA-specific optimizations, some of which *do* require different CSS files. For example, unicode-range delivers a huge savings to the user, but due to various browser quirks you only want to serve that to Chrome and Firefox, and you can’t deliver this by embedding the collection of src’s in a single rule”.

Though there may be the occasional project that requires greater control, and @import can’t be used with CSS conditionals as it has to be the first property defined in the style sheet. 

 

@import

@import url(http://fonts.googleapis.com/css?family=Orbitron);

Using @import the webfonts did not load under Android 2.3, so support is not as wide as <link>. Though if Mailbox support is more important to you than Android 2.3, then @import may be your best option.

When using all four font formats, we saw almost no difference in support between @font-face directly in the head and @import. The only exception was AOL under IE11, which rendered the web fonts with @font-face in the head but failed using @import or <link>.

 

<link>

<link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>

<link> gives us Android 2.2 right up to 4.4, as well as iOS and Mac Mail. That’s 55% coverage for most email programs. Support runs along similar lines to responsive design, which has been widely adopted. The only client <link> didn’t support that the other methods did was iOS Mailbox app.

As <link> has the widest support and Google dynamically handles the maintenance for us, this is our default when using Google Fonts going forward.