Webfont fallback targeting in email
 Share
The version of the browser you are using is no longer supported. Please upgrade to a supported browser.Dismiss

 
View only
 
 
Still loading...
ABCDEF
1
Client: In-house / 2015 / Carried out in stylecampaign device lab / Question? email anna@stylecampaign.com
2
Trying to see if we can accurately serve different fallback font sizes vs. webfonts in email to account for the fact that they don't always match up as well as you'd like. Also looking at how much of a difference WebKit targeting makes compared to basic media query switch. I remembered from previous client projects that some webmail clients fell through the cracks. Running this test to remind myself what was what support wise; leaving out more edge case devices in our lab like BB, WP & Kindle. QA carried out with three color coded test emails, click the underlined links below to view them. Background will change color depending on which switches have been triggered (media query and webfont support are very similar but not identical). Quite surprised to learn that over 50% of websites already use webfonts, see a similar trend happening in email so I wanted to get this fallback technique down. If you want to skip to the final result... we figured out a solution we're happy with see AOL Chrome code below (called AOL hack as it was the final holdout when using WebKit targeting).
3
Black background = default layout showing fallbacks, all the styles defined within the media query are skipped.Green backround = reads content defined in media query, and if you see webfonts then also supported.Red = same as green just on small viewports, if you see webfonts then also supported. (If WebKit test its not identifing as WebKit as it would be blue).Purple = reads media query content + identifies as WebKit, if you see webfonts then they also supported (desktop).Blue = same as purple just on small viewports, reads content defined in media query + identifies as WebKit. If you see webfonts then they are also supported.
4
Webfont fallback supportMedia Query SwitchMedia Query + WebKit Targeting SwitchWebmail knock out (AOL Chrome)Support Notes
5
Webmail clients
6
Gmail FirefoxDefault Default Default
7
Gmail ChromeDefault Default Default
8
Gmail IEDefault Default Default
9
Yahoo Mail FirefoxMQ / No WF *MQ / No WFMQ / No WF*Draws fallbacks in webfont sizes, Webkit knocks it out so correct sizes drawn.
10
Yahoo Mail ChromeMQ / No WF *MQ / No WFMQ / No WF*Draws fallbacks in webfont sizes, Webkit knocks it out so correct sizes drawn.
11
Yahoo Mail IEMQ / No WF *MQ / No WFMQ / No WF*Draws fallbacks in webfont sizes, Webkit knocks it out so correct sizes drawn.
12
AOL FirefoxMQ / No WF *MQ / No WFMQ / No WF*Draws fallbacks in webfont sizes, Webkit knocks it out so correct sizes drawn.
13
AOL ChromeMQ / No WF *MQ / WK / no WF (wrong font sizes)MQ / WK / no WF (right font sizes)(1) Draws fallbacks in webfont sizes (2) Webkit does not knock it out (3) Atttribute selector knocks out AOL.
14
AOL IE MQ / No WF *MQ / No WFMQ / No WF*Draws fallbacks in webfont sizes, Webkit knocks it out so correct sizes drawn.
15
Outlook.com Firefox (upgraded to 365 backend)Default Default DefaultMy free Outlook.com test account (used to be Hotmail) shows black as it's been upgraded and is using a different client based on 365
16
Outlook.com Chrome (upgraded to 365 backend)DefaultDefaultDefault
17
Outlook.com IE (upgraded to 365 backend)
DefaultDefaultDefault
18
Outlook.com Firefox (Litmus old Outlook.com)MQ / No WF *MQ / No WFMQ / No WFLitmus shows green with fallbacks in WF sizes as its using the old Outlook.com until most people have been upgraded and then they will switch over to 365-based client.
19
Outlook.com Chrome (Litmus old Outlook.com)MQ / No WF *MQ / No WFMQ / No WF*Draws fallbacks in webfont sizes, WebKit knocks it out so correct sizes drawn.
20
Outlook.com IE11 (Litmus old Outlook.com)MQ / No WF *MQ / No WFMQ / No WF
21
Desktop
22
Webfont fallback supportMedia Query SwitchMedia Query + WebKit Targeting SwitchWebmail knock out (AOL Chrome)Support Notes
23
Outlook 2000DefaultDefaultDefault
24
Outlook 2002DefaultDefaultDefault
25
Outlook 2003DefaultDefaultDefault
26
Outlook 2007*DefaultDefaultDefaultFallback to Times unless you fix it
27
Outlook 2010*DefaultDefaultDefaultFallback to Times unless you fix it
28
Outlook 2011 (Mac)MQ / WF MQ / WK / WFMQ / WK / WF
29
Outlook 2013*DefaultDefaultDefaultFallback to Times unless you fix it
30
Outlook 2016MQ / WF MQ / WK / WFMQ / WK / WF
31
Apple Mail 7MQ / WF MQ / WK / WFMQ / WK / WF
32
Apple Mail 8MQ / WF MQ / WK / WFMQ / WK / WF
33
Lotus Notes 7DefaultDefaultDefault
34
Lotus Notes 8.5DefaultDefaultDefault
35
Thunderbird 38.2MQ / No WF *MQ / No WFMQ / No WF (right sizes)*Draws fallbacks in webfont sizes, WebKit knocks it out so correct sizes drawn.
36
iOS iPhone / iPod
37
Webfont fallback supportMedia Query SwitchMedia Query + WebKit Targeting SwitchWebmail knock out (AOL Chrome)Support Notes
38
iPod iOS 9 nativeMQ / WFMQ / WK / WFMQ / WK / WF
39
iPod iOS 9 Gmail app vr 4.1DefaultDefaultDefault
40
iPod iOS 9 Inbox by Gmail vr 1.3.8DefaultDefaultDefault
41
iPod iOS 9 Outlook vr 1.4.2MQ / WFMQ / WK / WFMQ / WK Webfonts knocked out by Attribute selector test
42
iPod iOS 9 Yahoo! Mail vr 3.2.19DefaultDefaultDefault
43
iPod iOS 9 Mailbox vr 2.4.5MQ / no WFMQ / WK MQ / WK
44
iPod iOS 9 SparrowMQ / WFMQ / WK / WFMQ / WKWebfonts knocked out by Attribute selector test
45
iPod iOS 9 Boxer vr 6.0.3DefaultDefaultDefault
46
iPod 8.4.1 nativeMQ / WFMQ / WK / WFMQ / WK / WF
47
iPod 5.1.1MQ / WFMQ / WK / WFMQ / WK / WF
48
iPod 4.3.5MQ / WFMQ / WK / WFMQ / WK / WF
49
iOS iPad
50
Webfont fallback supportMedia Query SwitchMedia Query + WebKit Targeting SwitchWebmail knock out (AOL Chrome)Support Notes
51
iPad Mini 8.1MQ / WF MQ / WK / WFMQ / WK / WF
52
iPad 8.4.1 (retina) nativeMQ / WF MQ / WK / WFMQ / WK / WF
53
iPad 4.3.5 (non-retina)MQ / WF MQ / WK / WFMQ / WK / WF
54
Android
55
Webfont fallback supportMedia Query SwitchMedia Query + WebKit Targeting SwitchWebmail knock out (AOL Chrome)Support Notes
56
Android native, 2.3.6 GB, Galaxy NoteMQ / WFMQ / WK / WFMQ / WK / WF
57
Android native, 4.0.4 ICS, Samsung Galaxy NexusMQ / WFMQ / WK / WFMQ / WK / WF
58
Android Outlook.com, 4.0.4 ICS, Samsung Galaxy NexusDefaultDefaultDefault
59
Android Yahoo Mail, 4.0.4 ICS, Samsung Galaxy NexusDefaultDefaultDefault
60
Android native, 4.1.2 Jellybean, Galaxy S2MQ / WFMQ / WK / WFMQ / WK / WF
61
Android native, 4.3 Jellybean, S4MQ / WFMQ / WK / WFMQ / WK / WF
62
Nexus 7 native, 4.4.2 KitKatMQ / WFMQ / WK / WFMQ / WK / WF
63
Android Gmail app DefaultDefaultDefault
64
Android Yahoo Mail appDefaultDefaultDefault
65
Litmus preview tool
66
View Litmus previewsMedia Query SwitchMedia Query + WebKit Targeting SwitchWebmail knock out (AOL Chrome)
Loading...
 
 
 
Full QA