Download - Web Fonts
WEB FONT EMBEDDINGA beautiful alternative
1998
2012
BEFORE & NOW Mozilla strongly encourages the use of Web Font embedding
1996
2012
BEFORE & NOW With IE9, Microsoft entered the world of font-embedding with
W3C standards and uses it on their website
1995
2012
BEFORE & NOW Adobe will introduce Web Font embedding in Dreamweaver
CS6 and uses it on their website
SAFE WEB FONTS
@FONT-FACE SAVES THE DAY!
• CSS2 has a specification to download remote fonts.
• The following formats were introduced:
• TrueDoc (PFR)
• Embedded Open Type (EOT)
• Web Open Format (WOFF)
• Scalable Vector Graphics (SVG)
http://polaroid.com/en/products
@FONT-FACE EXAMPLES
http://womens.timberland.com/#/spotlight
@FONT-FACE EXAMPLES
http://www.newyorker.com/
@FONT-FACE EXAMPLES
THE COST OF TEXT-IMAGES
• Web Designer: 4 minutes per image
‣ Open PSD file
‣ Edit text
‣ Create a web slice
‣ Isolate backgrounds and other layers
‣ Choose proper transparency settings and file format
‣ Export to Hard Drive
THE COST OF TEXT-IMAGES
• UI Developer: 4-10 minutes per image
‣ Copy file into Application codebase or file structure
‣ Modify HTML or CSS file
‣ Adjust size settings
‣ Cross-browser test
- If it’s part of a transaction flow, it can take from 1 to 5 minutes
‣ Commit the code
IMAGE REPLACING COSTSTEST CASE
• Based on 68 text-images in English
• 4 minutes per image for the Web Designer
• 7 average minutes per image for the UI Developer
• 11 overall minutes per text-image
• 68 x 11 = 748 minutes = 12.5 hours
• That’s about 2 working days (just for changing images!)
WEB FONTS IN ACTION
• Some CTA buttons
• Headers
• Google Webfonts
IE7 Windows XP
Firefox 10 Mac OS X
WEB FONT TEST CASEMain page titles with gradient overlay
IE8 Windows XP
WEB FONT TEST CASEMain page title with sub-title
WEB FONT TEST CASECTA buttons with normal and bold versions
IE8 Windows XP
Firefox 10 OS X