Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How and Why I Built fontfamily.io

E1899004c71c7043343196103e210be3?s=47 zachleat
November 11, 2014

How and Why I Built fontfamily.io

E1899004c71c7043343196103e210be3?s=128

zachleat

November 11, 2014
Tweet

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

  18. None
  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
  23. None
  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

  34. None
  35. INTERNALS CLEAN URLS TINY BACKEND HANDLES ANY font-FAMILY COMBINATION

  36. WITHOUT A font-family, MOST USE SERIF DEFAULT. NOT IE9-10

  37. None
  38. FONT-FAMILY: FANTASY

  39. FONT-FAMILY: CURSIVE

  40. SERIF, SANS-SERIF, MONOSPACE ARE SAFE TO USE

  41. Gill Sans

  42. None
  43. SIDE PROJECTS! https://speakerdeck.com/zachleat/side-projects

  44. @zachleat Thank you!