1. Beyond the Envelope@Paul_Airy // Web Fonts in email: How? What? Where? Web Fonts

2. Beyond the Envelope@Paul_Airy Paul Airy. 3. Beyond the Envelope@Paul_Airy Beyond the Envelope HTML Email Research, Design and Development Laboratory 4. Beyond the Envelope@Paul_Airy // How to implement Web Fonts. // What the font formats and licensing options are. // Where to place Web Fonts in your emails. How? What? Where? 5. Beyond the Envelope@Paul_Airy www= :( 6. Beyond the Envelope@Paul_Airy @= :( 7. Beyond the Envelope@Paul_Airy But 8. Beyond the Envelope@Paul_Airy // Apple iPhone. // Outlook. // Apple iPad. Top 5 Email Clients* // Gmail. // Apple Mail. *Calculated from 395 million opens tracked by Litmus Email Analytics in April 2014 9. Beyond the Envelope@Paul_Airy 46% 10. Beyond the Envelope@Paul_Airy :) 11. Beyond the Envelope@Paul_Airy Why? 12. Beyond the Envelope@Paul_Airy UX. 13. Beyond the Envelope@Paul_Airy How? // Web Fonts in email: How? What? Where? 14. Beyond the Envelope@Paul_Airy // 1. Import your font in the .// 2. Declare your font in the font stack. How to implement Web Fonts 15. Beyond the Envelope@Paul_Airy How to implement Web Fonts: Self-Hosted @font-face { font-family: Playball'; src: url(http:// www.beyondtheenvelope.co.uk/ webfonts/playball-regular.woff') format(woff); } 16. Beyond the Envelope@Paul_Airy How to implement Web Fonts: Hosted 17. Beyond the Envelope@Paul_Airy How to implement Web Fonts: Hosted @import url(http:// fonts.googleapis.com/css? family=Playball); 18. Beyond the Envelope@Paul_Airy In the font stack font-family: 'Playball', cursive, georgia, times, serif; 19. Beyond the Envelope@Paul_Airy 20. Beyond the Envelope@Paul_Airy What? // Web Fonts in email: How? What? Where? 21. Beyond the Envelope@Paul_Airy Formats. 22. Beyond the Envelope@Paul_Airy // TrueType (TT). // OpenType (TrueType and PostScript Flavours). // Web Open Font Format (WOFF). Font Formats // Embedded OpenType (EOT). // PostScript (PS). 23. Beyond the Envelope@Paul_Airy // Developed by Apple and Microsoft. // Initially had a poor reputation for low quality. // Can now be relied on for quality. TrueType (TT) 24. Beyond the Envelope@Paul_Airy // Comes in two avours (TrueType and PostScript). // Additional characters within set (e.g. ligatures). OpenType (OT) // Valid Web Font format. 25. Beyond the Envelope@Paul_Airy // Not technically a font format. // Think of it as a .zip le for fonts. // May well become the standard in the future. Web Open Font Format (WOFF) 26. Beyond the Envelope@Paul_Airy Suppliers. 27. Beyond the Envelope@Paul_Airy Web Font Suppliers 28. Beyond the Envelope@Paul_Airy Licensing. 29. Beyond the Envelope@Paul_Airy // CSS rules delivered via API. // Free or commercially accessible. // No standard pricing model for email. Hosted Licensing: Pros and Cons 30. Beyond the Envelope@Paul_Airy // Control. // Management Required. Server. Formats. // Can be more expensive. Self-Hosted Licensing: Pros and Cons 31. Beyond the Envelope@Paul_Airy Where? // Web Fonts in email: How? What? Where? 32. Beyond the Envelope@Paul_Airy // Avoid brand sensitive areas. // Anywhere else. // Allow for text reowing within table cells. Where? // Avoid body copy within static table cells. 33. Beyond the Envelope@Paul_Airy // How to implement Web Fonts. // What Font Formats and licensing to choose from. // Where to place Web Fonts. How? What? Where? 34. Beyond the Envelope@Paul_Airy Thank you. // Web Fonts in email: How? What? Where?