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. `
@0.25×
`
@0.5×
`
@1×
`
@2×
`
@4×
`
@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. C SS
.icon:before {
content: attr(data-icon);
font-family: 'Cleardings';
speak: none;
}
HTML
<a data-icon="&#xe012;" href="http://
twitter.com/clearleft">@clearleft</a>

25. C SS
[data-icon]:before {
content: attr(data-icon);
font-family: 'Cleardings';
speak: none;
}
HTML
<a data-icon="&#xe012;" href="http://
twitter.com/clearleft">@clearleft</a>

27. What About
Ligature
Asset Fonts?

28. fi fi
fl fl

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. 19k
b
climaliga.woff

37. Go forth and
create resolution
independence!

38. Thanks For
Listening
Fork I
@joshje t!
github.com/joshje/forecast