| A | B | C | D | E | F | G | H | I | |
|---|---|---|---|---|---|---|---|---|---|
1 | Fonts downloaded from https://google-webfonts-helper.herokuapp.com/fonts | Anna Yeaman / anna@stylecampaign.com | http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ | ||||||
2 | Google Fonts file size comparison for working out web font budgets (KB) | WOFF | TTF | EOT | SVG | WOFF 2 | Google impact on page load time meter (in KB) | No. of available weights | Notes and further reading on web font performance |
3 | Top 20 Goggle Fonts at normal weight | Most important format for email | 2nd most important format for email | Edge case | Edge case | Not really used in email handy for web | |||
4 | Open Sans | 20 | 34 | 18 | 105 | 11 | 15 | 10 | Karla smallest at 9 KB WOFF file, and Lora largest at 64 KB WOFF file |
5 | Roboto | 19 | 32 | 16 | 48 | 11 | 12 | 12 | Average weight of top 20 Goggle fonts in WOFF format is 27.95 KB |
6 | Roboto Condensed | 18 | 32 | 16 | 47 | 11 | 11 | 6 | 9 10-20KB, 5 21-30 KB, 3 31-40 KB over 41 KB 3 / Most top 20 (45%) fall in 10-20K range |
7 | Lato | 35 | 81 | 35 | 231 | 17 | 25 | 10 | Web font support in email by format |
8 | Slabo 27px | 20 | 40 | 18 | 51 | 10 | 13 | 1 | No Italic weight, see this post 'Say No to Faux Bold' |
9 | Oswald | 20 | 34 | 18 | 56 | 10 | 13 | 3 | No italic or bold italic (light, normal and bold only) |
10 | Lora | 64 | 138 | 60 | 427 | 34 | 28 | 4 | The Performance and usability of Font Loading |
11 | PT Sans | 56 | 100 | 49 | 96 | 17 | 55 | 4 | WOFF2 is ~30% smaller than WOFF but not much use to email designers at this point. |
12 | Source Sans Pro | 18 | 35 | 16 | 59 | 12 | 18 | 12 | Only load styles and characters you need, see unicode range (not supported everywhere, need to use Google <link> or @import) |
13 | Open Sans Condensed | 21 | 35 | 19 | 104 | 10 | 17 | 3 | Missing some weights just light, light italic and bold |
14 | Droid Sans | 25 | 39 | 22 | 71 | 12 | 25 | 2 | Just normal and bold no italic or italic bold |
15 | Raleway | 32 | 63 | 30 | 121 | 15 | 59 | 9 | Watch your font weight |
16 | Ubuntu | 40 | 72 | 34 | 101 | 18 | 28 | 8 | See slide 11 about how font size is determined by complexity of the glyphs |
17 | Montserrat | 14 | 22 | 11 | 44 | 10 | 14 | 2 | Only normal and bold missing italic |
18 | Roboto Slab | 22 | 36 | 19 | 56 | 11 | 12 | 4 | Thin, light, normal and bold missing italic |
19 | Droid Serif | 26 | 41 | 23 | 94 | 13 | 27 | 4 | Making web fonts faster |
20 | Merriweather | 17 | 31 | 14 | 85 | 13 | 11 | 8 | Google font analytics |
21 | PT Sans Narrow | 44 | 81 | 39 | 82 | 16 | 48 | 2 | Normal and bold weights only missing italic. Quite a difference bettwen file size of regular vs. bold here. e.g woff regular is 44k vs. 65k for bold |
22 | Arimo | 29 | 46 | 23 | 57 | 10 | 28 | 4 | How to quickly test Google web font speeds |
23 | Noto Sans | 19 | 29 | 17 | 54 | 10 | 21 | 4 | |
24 | Notable | ||||||||
25 | Cabin | 59 | 143 | 57 | 421 | 26 | 83 | 8 | |
26 | Playfair Display | 30 | 57 | 27 | 93 | 18 | 26 | 6 | |
27 | Inconsolata (monospace) | 38 | 62 | 35 | 62 | 10 | 27 | 2 | Normal and bold missing styles |
28 | Muli | 25 | 46 | 23 | 100 | 13 | 31 | 4 | Light, light italic, normal and normal italic missing bold |
29 | Josefin Sans | 28 | 60 | 27 | 117 | 17 | 21 | 10 | |
30 | Josefin Slab | 46 | 103 | 41 | 66 | 13 | 51 | 10 | |
31 | Karla | 9 | 14 | 7 | 33 | 7 | 4 | 4 | |
32 | Fira Sans | 15 | 29 | 14 | 53 | 12 | 18 | 8 | |
33 | Ropa Sans | 19 | 36 | 15 | 53 | 12 | 10 | 2 | Normal and normal italic missing bold |
34 | EK Mukta | 29 | 63 | 28 | 82 | 15 | 143 | 7 | Missing italics |
35 | Syncopate | 42 | 108 | 39 | 96 | 14 | 67 | 2 | Normal and bold missing italics |
36 | Alegreya | 48 | 102 | 41 | 109 | 20 | 15 | 6 | |
37 | Domine | 28 | 63 | 26 | 68 | 15 | 26 | 2 | Normal and bold |
38 | Cinzel | 16 | 32 | 14 | 61 | 13 | 24 | 3 | Normal, bold and ultra bold missing italic |
39 | Arimo | 29 | 44 | 23 | 57 | 10 | 28 | 4 | |
40 | Arvo | 25 | 37 | 22 | 71 | 11 | 26 | 4 | |
41 | Vollkorn | 27 | 49 | 25 | 105 | 18 | 31 | 4 | |
42 | PT Serif | 43 | 83 | 38 | 167 | 20 | 44 | 4 | |