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
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.
Posted on Friday, February 27th, 2015 at 12:48 pm.