Web Fonts in Email: How? What? Where?
•
2 likes•710 views
Web Fonts. As Email Designers and Developers we want to include them in our emails. But how do we go about it? What font formats and licensing options should we choose? And where are the best places in our emails to use them?
Recommended
Recommended
More Related Content
Similar to Web Fonts in Email: How? What? Where?
Similar to Web Fonts in Email: How? What? Where? (20)
Recently uploaded
Recently uploaded (20)
Web Fonts in Email: How? What? Where?
- 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?
- 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
- 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 <head>. // 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 <link href='http:// fonts.googleapis.com/css? family=Playball' rel='stylesheet' type='text/css'>
- 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;
- 20. Beyond the Envelope™@Paul_Airy What? // Web Fonts in email: How? What? Where?
- 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 flavours (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 file for fonts. // May well become the standard in the future. Web Open Font Format (WOFF)
- 27. Beyond the Envelope™@Paul_Airy Web Font Suppliers
- 29. Beyond the Envelope™@Paul_Airy // CSS rules delivered via API. // Free or commercially accessible. // No standard pricing model for email. Hosted Licensing: Pro’s and Cons
- 30. Beyond the Envelope™@Paul_Airy // Control. // Management Required. Server. Formats. // Can be more expensive. Self-Hosted Licensing: Pro’s 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 reflowing 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?