How and Why I Built fontfamily.io

See also: http://www.zachleat.com/web/font-family-reunion/

Transcript

1. Font Family Reunion fontfamily.io
2. @zachleat zachleat.com
3. W3C Banner CSS Rewrite zachleat.github.io/w3c-banners/ 2014-SEP
4. ~18KB PNG ~98KB SVG 0.5KB CSS (GZIP)
5. How well supported is Gill Sans?
6. HOW DOES YOU KNOW iF A FONT IS aVAILABLE?
7. BIGTEXT MAKES TEXT BIG zachleat.com/web/bigtext-makes-text-big/ 2011-JAN
8. Code zachleat.com/bigtext/demo/
9. WEBFONTLOADER github.com/typekit/webfontloader/ 7.0KB JS (GZIP)
10. FONTFACEONLOAD github.com/zachleat/fontfaceonload 1.5KB JS (GZIP)
11. FontFaceOnload(  "Raleway",  {     success:  function()  {       alert(  "Success!"  );     }   });
12. font-­‐family:  Raleway,  sans-­‐serif;   font-­‐family:  Raleway,  serif;
13. font-­‐family:  Raleway,  sans-­‐serif;   font-­‐family:  Raleway,  serif;
14. CSS Font Loading http://dev.w3.org/csswg/css-font-loading/
15. doc.fonts.load(  "1em  Raleway"  )     .then(function()  {       alert(  "Success!"  );     });
16. ALSO USED IN THE WOFF2 FEATURE TEST: filamentgroup.com/lab/woff2.html
17. THE BIG GIANT FONT FAMILY TREE
19. //  *nix   >  fc-­‐list   //  Mac  OS  X  Mavericks   http://support.apple.com/kb/HT5944   //  Mac  OS  X  Snow  Leopard   http://support.apple.com/kb/HT5154   //  Windows:   http://www.microsoft.com/typography/fonts/product.aspx   //  Windows  8   http://www.microsoft.com/typography/fonts/product.aspx?PID=164   //  Windows  7   http://www.microsoft.com/typography/fonts/product.aspx?PID=161 https://github.com/zachleat/font-family-reunion/blob/master/artifacts/source-list.txt
20. raw.githubusercontent.com/zachleat/font-family-reunion/master/test/src/font-families.json 1190 FONTS
21. TEST EACH FONT-FAMILY NAME INDIVIDUALLY
22. ALSO TESTS TO SEE IF FONT-FAMILY MATCHES ONE OF: • serif • sans-serif • monospace • fantasy • cursive
24. MAC OS X
25. LOGS TO MONGODB FOR EASY RETRIEVAL FROM MOBILE DEVICES
26. MORE ABOUT CSS FONT-FAMILY:
27. UNQUOTED FONT-FAMILY NAMES ARE ALMOST ALWAYS OK TO USE. mathiasbynens.be/notes/unquoted-font-family
28. BUT QUOTED DEFAULT CSS FAMILY NAME KEYWORDS ARE DIFFERENT THAN UNQUOTED
29. font-­‐family:  "serif";   /*  is  NOT  the  same  as:  */   font-­‐family:  serif;
30. font-family is not case sensitive
31. LIMITATIONS
32. LESS RELIABLE WITH FONTS THAT ONLY MAP CHARACTERS NOT USED IN THE TEST STRING NON-ASCII CHARACTERS
33. A SMALL NODE SCRIPT STATICALLY GENERATES MOST OF FONTFAMILY.IO
35. INTERNALS CLEAN URLS TINY BACKEND HANDLES ANY font-FAMILY COMBINATION
36. WITHOUT A font-family, MOST USE SERIF DEFAULT. NOT IE9-10
38. FONT-FAMILY: FANTASY
39. FONT-FAMILY: CURSIVE
40. SERIF, SANS-SERIF, MONOSPACE ARE SAFE TO USE
41. Gill Sans
43. SIDE PROJECTS! https://speakerdeck.com/zachleat/side-projects
44. @zachleat Thank you!