Asset Fonts

Fef1ad956b91dcbc2e0d2266b34b46c8?s=47 Josh Emerson
March 02, 2013

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.

Fef1ad956b91dcbc2e0d2266b34b46c8?s=128

Josh Emerson

March 02, 2013
Tweet

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™

  11. None
  12. Why Asset Fonts?

  13. ✓ assets.png assets.ttf

  14. ✓ ✓ ✓ ✓ ✓ ✓

  15. ×

  16. How Do I Create One?

  17. None
  18. joshe.me/asset-fonts

  19. icomoon.io

  20. How Do I Use It?

  21. None
  22. .icon:before { content: '\xe012'; font-family: 'Cleardings'; speak: none; }

  23. .icon:before { content: attr(data-icon); font-family: 'Cleardings'; speak: none; } <a

    data-icon="&#xe012;" href="http:// twitter.com/clearleft">@clearleft</a> CSS HTML
  24. [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
  25. None
  26. What About Ligature Asset Fonts?

  27. f fi i f fl l

  28. symbolset.com

  29. None
  30. forecast.is

  31. forecast.is

  32. None
  33. -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";
  34. None
  35. climaliga.woff 19kb

  36. Go forth and create resolution independence!

  37. Thanks For Listening @joshje github.com/joshje/forecast Fork It!