How and Why I Built fontfamily.io

Slide 1

Slide 1 text

Font Family Reunion fontfamily.io

Slide 2

Slide 2 text

@zachleat zachleat.com

Slide 3

Slide 3 text

W3C Banner CSS Rewrite zachleat.github.io/w3c-banners/ 2014-SEP

Slide 4

Slide 4 text

~18KB PNG ~98KB SVG 0.5KB CSS (GZIP)

Slide 5

Slide 5 text

How well supported is Gill Sans?

Slide 6

Slide 6 text

HOW DOES YOU KNOW iF A FONT IS aVAILABLE?

Slide 7

Slide 7 text

BIGTEXT MAKES TEXT BIG zachleat.com/web/bigtext-makes-text-big/ 2011-JAN

Slide 8

Slide 8 text

Code zachleat.com/bigtext/demo/

Slide 9

Slide 9 text

WEBFONTLOADER github.com/typekit/webfontloader/ 7.0KB JS (GZIP)

Slide 10

Slide 10 text

FONTFACEONLOAD github.com/zachleat/fontfaceonload 1.5KB JS (GZIP)

Slide 11

Slide 11 text

FontFaceOnload( "Raleway", { success: function() { alert( "Success!" ); } });

Slide 12

Slide 12 text

font-‐family: Raleway, sans-‐serif; font-‐family: Raleway, serif;

Slide 13

Slide 13 text

font-‐family: Raleway, sans-‐serif; font-‐family: Raleway, serif;

Slide 14

Slide 14 text

CSS Font Loading http://dev.w3.org/csswg/css-font-loading/

Slide 15

Slide 15 text

doc.fonts.load( "1em Raleway" ) .then(function() { alert( "Success!" ); });

Slide 16

Slide 16 text

ALSO USED IN THE WOFF2 FEATURE TEST: ﬁlamentgroup.com/lab/woff2.html

Slide 17

Slide 17 text

THE BIG GIANT FONT FAMILY TREE

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

// *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

Slide 20

Slide 20 text

raw.githubusercontent.com/zachleat/font-family-reunion/master/test/src/font-families.json 1190 FONTS

Slide 21

Slide 21 text

TEST EACH FONT-FAMILY NAME INDIVIDUALLY

Slide 22

Slide 22 text

ALSO TESTS TO SEE IF FONT-FAMILY MATCHES ONE OF: • serif • sans-serif • monospace • fantasy • cursive

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

MAC OS X

Slide 25

Slide 25 text

LOGS TO MONGODB FOR EASY RETRIEVAL FROM MOBILE DEVICES

Slide 26

Slide 26 text

MORE ABOUT CSS FONT-FAMILY:

Slide 27

Slide 27 text

UNQUOTED FONT-FAMILY NAMES ARE ALMOST ALWAYS OK TO USE. mathiasbynens.be/notes/unquoted-font-family

Slide 28

Slide 28 text

BUT QUOTED DEFAULT CSS FAMILY NAME KEYWORDS ARE DIFFERENT THAN UNQUOTED

Slide 29

Slide 29 text

font-‐family: "serif"; /* is NOT the same as: */ font-‐family: serif;

Slide 30

Slide 30 text

font-family is not case sensitive

Slide 31

Slide 31 text

LIMITATIONS

Slide 32

Slide 32 text

LESS RELIABLE WITH FONTS THAT ONLY MAP CHARACTERS NOT USED IN THE TEST STRING NON-ASCII CHARACTERS

Slide 33

Slide 33 text

A SMALL NODE SCRIPT STATICALLY GENERATES MOST OF FONTFAMILY.IO

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

INTERNALS CLEAN URLS TINY BACKEND HANDLES ANY font-FAMILY COMBINATION

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

FONT-FAMILY: FANTASY

Slide 39

Slide 39 text

FONT-FAMILY: CURSIVE

Slide 40

Slide 40 text

SERIF, SANS-SERIF, MONOSPACE ARE SAFE TO USE

Slide 41

Slide 41 text

Gill Sans

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

@zachleat Thank you!