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?
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
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'>
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)
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
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?