Asset Fonts

Asset fonts let you achieve resolution independence for icons on your site. They are web fonts which contain icons, similar to webdings and can be made specifically for your site.

This presentation was given at Responsive Day Out 2013.

Transcript

1. Asset Fonts (in 10 minutes)
2. What are Asset Fonts?
3.     
4.    
5. Why Resolution Independence?
6. Photo by miguel77 http://flic.kr/p/a7H5jd
7. @2× @?×
8. @4× @1× @2× @0.5× @0.25× @8× ` ` ` ` ` `
9. Like Magic! Photo by eva.pébar http://flic.kr/p/9hBrtv
10. Good for Grandma™
12. Why Asset Fonts?
13. ✓ assets.png assets.ttf
14. ✓ ✓ ✓ ✓ ✓ ✓
15. ✓
16. ×
17. How Do I Create One?
19. joshe.me/asset-fonts
20. icomoon.io
21. How Do I Use It?
23. .icon:before { content: '\xe012'; font-family: 'Cleardings'; speak: none; }
24. .icon:before { content: attr(data-icon); font-family: 'Cleardings'; speak: none; } <a data-icon="&#xe012;" href="http:// twitter.com/clearleft">@clearleft</a> CSS HTML
25. [data-icon]:before { content: attr(data-icon); font-family: 'Cleardings'; speak: none; } <a data-icon="&#xe012;" href="http:// twitter.com/clearleft">@clearleft</a> CSS HTML
27. What About Ligature Asset Fonts?
28. f fi i f fl l
29. symbolset.com
31. forecast.is
32. forecast.is
34. -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga";
36. climaliga.woff 19kb
37. Go forth and create resolution independence!
38. Thanks For Listening @joshje github.com/joshje/forecast Fork It!