The Consequences of Web Fonts

In the last few years the number of sites using web fonts has soared. Unfortunately the default behaviour of most browsers is to hide text while downloading fonts. Find out how to embrace the flash of unstyled text and avoid the devastating effects of hiding your content while fonts are downloading.

Transcript

1. THE CONSEQUENCES OF
   WEB FONTS
   @bram_stein
   !
   

   View Slide

2. example.com
   In olden times when wishing still helped one, there lived
   a king whose daughters were all beautiful, but the
   youngest was so beautiful that the sun itself, which has
   seen so much, was astonished whenever it shone in her
   face. Close by the king’s castle lay a great dark forest,
   and under an old lime-tree in the forest was a well, and
   when the day was very warm, the king’s child went out
   into the forest and sat down by the side of the cool
   fountain, and when she was bored she took a golden
   ball, and threw it up on high and caught it, and this ball
   was her favourite plaything.
   !
   Now it so happened that on one occasion the princess’s
   golden ball did not fall into the little hand which she was
   holding up for it, but on to the ground beyond, and rolled
   straight into the water.
   The Frog King, or Iron Henry
   The Brothers Grimm
   Grimm’s Household Tales
   

   View Slide

3. A
   

   View Slide

4. View Slide

5. example.com
   

   View Slide

6. example.com
   In olden times when wishing still helped one, there
   lived a king whose daughters were all beautiful, but
   the youngest was so beautiful that the sun itself,
   which has seen so much, was astonished whenever it
   shone in her face. Close by the king’s castle lay a
   great dark forest, and under an old lime-tree in the
   forest was a well, and when the day was very warm,
   the king’s child went out into the forest and sat down
   by the side of the cool fountain, and when she was
   bored she took a golden ball, and threw it up on high
   and caught it, and this ball was her favourite
   plaything.
   !
   Now it so happened that on one occasion the
   princess’s golden ball did not fall into the little hand
   which she was holding up for it, but on to the ground
   beyond, and rolled straight into the water.
   The Frog King, or Iron Henry
   The Brothers Grimm
   Grimm’s Household Tales
   Loading example.com
   

   View Slide

7. example.com
   In olden times when wishing still helped one, there lived
   a king whose daughters were all beautiful, but the
   youngest was so beautiful that the sun itself, which has
   seen so much, was astonished whenever it shone in her
   face. Close by the king’s castle lay a great dark forest,
   and under an old lime-tree in the forest was a well, and
   when the day was very warm, the king’s child went out
   into the forest and sat down by the side of the cool
   fountain, and when she was bored she took a golden
   ball, and threw it up on high and caught it, and this ball
   was her favourite plaything.
   !
   Now it so happened that on one occasion the princess’s
   golden ball did not fall into the little hand which she was
   holding up for it, but on to the ground beyond, and rolled
   straight into the water.
   The Frog King, or Iron Henry
   The Brothers Grimm
   Grimm’s Household Tales
   

   View Slide

8. B
   

   View Slide

9. View Slide

10. example.com
    

    View Slide

11. example.com
    Loading example.com
    

    View Slide

12. example.com
    In olden times when wishing still helped one, there lived
    a king whose daughters were all beautiful, but the
    youngest was so beautiful that the sun itself, which has
    seen so much, was astonished whenever it shone in her
    face. Close by the king’s castle lay a great dark forest,
    and under an old lime-tree in the forest was a well, and
    when the day was very warm, the king’s child went out
    into the forest and sat down by the side of the cool
    fountain, and when she was bored she took a golden
    ball, and threw it up on high and caught it, and this ball
    was her favourite plaything.
    !
    Now it so happened that on one occasion the princess’s
    golden ball did not fall into the little hand which she was
    holding up for it, but on to the ground beyond, and rolled
    straight into the water.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    

    View Slide

13. ?
    

    View Slide

14. A
    

    View Slide

15. View Slide

16. example.com
    

    View Slide

17. example.com
    In olden times when wishing still
    helped one, there lived a king whose
    daughters were all beautiful, but the
    youngest was so beautiful that the
    sun itself, which has seen so much,
    was astonished whenever it shone in
    her face. Close by the king’s castle
    lay a great dark forest, and under an
    old lime-tree in the forest was a well,
    and when the day was very warm, the
    king’s child went out into the forest
    and sat down by the side of the cool
    fountain, and when she was bored
    she took a golden ball, and threw it
    The Frog King,
    or Iron Henry
    The Brothers Grimm, Grimm’s Household Tales
    

    View Slide

18. example.com
    In olden times when wishing still helped
    one, there lived a king whose daughters
    were all beautiful, but the youngest was
    so beautiful that the sun itself, which
    has seen so much, was astonished
    whenever it shone in her face. Close by
    the king’s castle lay a great dark forest,
    and under an old lime-tree in the forest
    was a well, and when the day was very
    warm, the king’s child went out into the
    forest and sat down by the side of the
    cool fountain, and when she was bored
    she took a golden ball, and threw it
    The Frog King,
    or Iron Henry
    The Brothers Grimm, Grimm’s Household Tales
    

    View Slide

19. B
    

    View Slide

20. View Slide

21. example.com
    

    View Slide

22. example.com
    

    View Slide

23. example.com
    In olden times when wishing still helped
    one, there lived a king whose daughters
    were all beautiful, but the youngest was
    so beautiful that the sun itself, which
    has seen so much, was astonished
    whenever it shone in her face. Close by
    the king’s castle lay a great dark forest,
    and under an old lime-tree in the forest
    was a well, and when the day was very
    warm, the king’s child went out into the
    forest and sat down by the side of the
    cool fountain, and when she was bored
    she took a golden ball, and threw it
    The Frog King,
    or Iron Henry
    The Brothers Grimm, Grimm’s Household Tales
    

    View Slide

24. ?
    

    View Slide

25. request content content loads web fonts load
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much,
    was astonished whenever it shone in her face.
    Close by the king’s castle lay a great dark
    forest, and under an old lime-tree in the forest
    was a well, and when the day was very warm,
    the king’s child went out into the forest and sat
    down by the side of the cool fountain, and
    when she was bored she took a golden ball,
    and threw it up on high and caught it, and this
    ball was her favourite plaything.
    !
    Now it so happened that on one occasion the
    princess’s golden ball did not fall into the little
    hand which she was holding up for it, but on to
    the ground beyond, and rolled straight into the
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful that
    the sun itself, which has seen so much, was
    astonished whenever it shone in her face. Close
    by the king’s castle lay a great dark forest, and
    under an old lime-tree in the forest was a well,
    and when the day was very warm, the king’s child
    went out into the forest and sat down by the side
    of the cool fountain, and when she was bored she
    took a golden ball, and threw it up on high and
    caught it, and this ball was her favourite
    plaything.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful that
    the sun itself, which has seen so much, was
    astonished whenever it shone in her face. Close
    by the king’s castle lay a great dark forest, and
    under an old lime-tree in the forest was a well,
    and when the day was very warm, the king’s child
    went out into the forest and sat down by the side
    of the cool fountain, and when she was bored she
    took a golden ball, and threw it up on high and
    caught it, and this ball was her favourite
    plaything.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    Flash Of Unstyled Text (FOUT)
    Flash Of Invisible Text (FOIT)
    request content content loads web fonts load
    

    View Slide

26. Chrome Firefox Safari Opera IE9 IE10 IE11
    FOIT FOIT FOIT FOIT FOUT FOUT FOUT
    FOUT vs FOIT
    

    View Slide

27. Intentionally left blank
    

    View Slide

28. Chrome Firefox Safari Opera IE9 IE10 IE11
    FOIT FOIT FOIT FOIT FOUT FOUT FOUT
    3 sec. 3 sec. ∞ 3 sec. n/a n/a n/a
    FOUT vs FOIT
    

    View Slide

29. Lo
    In olden times when wishing still
    helped one, there lived a king
    whose daughters were all beautiful,
    but the youngest was so beautiful
    that the sun itself, which has seen
    so much, was astonished whenever
    it shone in her face. Close by the
    king’s castle lay a great dark forest,
    and under an old lime-tree in the
    forest was a well, and when the day
    The Frog King, or Iron Henry
    The Brothers
    Grimm
    Grimm’s
    Household Tales
    Flash Of Invisible Text followed by a Flash Of Unstyled Text
    request HTML timeout triggers
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the
    youngest was so beautiful
    that the sun itself, which has
    seen so much, was
    astonished whenever it shone
    in her face. Close by the
    king’s castle lay a great dark
    forest, and under an old lime-
    The Frog King, or Iron Henry
    The Brothers
    Grimm
    Grimm’s
    Household Tales
    web fonts load
    content loads
    

    View Slide

30. 50% use web fonts
    

    View Slide

31. 10%
    20%
    30%
    40%
    50%
    2011 2012 2013 2014 2015
    Web Font Usage 2011 - 2015
    

    View Slide

32. font size ~70kB
    

    View Slide

33. 1-4 fonts per site
    

    View Slide

34. 70kB - 280kB
    

    View Slide

35. FOUT PROGRESSIVE
    ENHANCEMENT
    is
    

    View Slide

36. CSS font-rendering
    swap • block • optional
    

    View Slide

37. @font-face {
    font-family: MyFont;
    src: url(myfont.woff);
    font-rendering: swap infinite;
    }
    

    View Slide

38. In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much,
    was astonished whenever it shone in her face.
    Close by the king’s castle lay a great dark
    forest, and under an old lime-tree in the forest
    was a well, and when the day was very warm,
    the king’s child went out into the forest and sat
    down by the side of the cool fountain, and
    when she was bored she took a golden ball,
    and threw it up on high and caught it, and this
    ball was her favourite plaything.
    !
    Now it so happened that on one occasion the
    princess’s golden ball did not fall into the little
    hand which she was holding up for it, but on to
    the ground beyond, and rolled straight into the
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful that
    the sun itself, which has seen so much, was
    astonished whenever it shone in her face. Close
    by the king’s castle lay a great dark forest, and
    under an old lime-tree in the forest was a well,
    and when the day was very warm, the king’s child
    went out into the forest and sat down by the side
    of the cool fountain, and when she was bored she
    took a golden ball, and threw it up on high and
    caught it, and this ball was her favourite
    plaything.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    font-rendering: swap infinite
    request content content loads web fonts load
    

    View Slide

39. @font-face {
    font-family: MyFont;
    src: url(myfont.woff);
    font-rendering: block 3s;
    }
    

    View Slide

40. Lo
    In olden times when wishing still
    helped one, there lived a king
    whose daughters were all beautiful,
    but the youngest was so beautiful
    that the sun itself, which has seen
    so much, was astonished whenever
    it shone in her face. Close by the
    king’s castle lay a great dark forest,
    and under an old lime-tree in the
    forest was a well, and when the day
    The Frog King, or Iron Henry
    The Brothers
    Grimm
    Grimm’s
    Household Tales
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the
    youngest was so beautiful
    that the sun itself, which has
    seen so much, was
    astonished whenever it shone
    in her face. Close by the
    king’s castle lay a great dark
    forest, and under an old lime-
    The Frog King, or Iron Henry
    The Brothers
    Grimm
    Grimm’s
    Household Tales
    font-rendering: block 3s
    request content timeout triggers web fonts load
    content loads
    

    View Slide

41. @font-face {
    font-family: MyFont;
    src: url(myfont.woff);
    font-rendering: optional;
    }
    

    View Slide

42. In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much,
    was astonished whenever it shone in her face.
    Close by the king’s castle lay a great dark
    forest, and under an old lime-tree in the forest
    was a well, and when the day was very warm,
    the king’s child went out into the forest and sat
    down by the side of the cool fountain, and
    when she was bored she took a golden ball,
    and threw it up on high and caught it, and this
    ball was her favourite plaything.
    !
    Now it so happened that on one occasion the
    princess’s golden ball did not fall into the little
    hand which she was holding up for it, but on to
    the ground beyond, and rolled straight into the
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    font-rendering: optional (uncached)
    font-rendering: optional (cached)
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful that
    the sun itself, which has seen so much, was
    astonished whenever it shone in her face. Close
    by the king’s castle lay a great dark forest, and
    under an old lime-tree in the forest was a well,
    and when the day was very warm, the king’s child
    went out into the forest and sat down by the side
    of the cool fountain, and when she was bored she
    took a golden ball, and threw it up on high and
    caught it, and this ball was her favourite
    plaything.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much,
    was astonished whenever it shone in her face.
    Close by the king’s castle lay a great dark
    forest, and under an old lime-tree in the forest
    was a well, and when the day was very warm,
    the king’s child went out into the forest and sat
    down by the side of the cool fountain, and
    when she was bored she took a golden ball,
    and threw it up on high and caught it, and this
    ball was her favourite plaything.
    !
    Now it so happened that on one occasion the
    princess’s golden ball did not fall into the little
    hand which she was holding up for it, but on to
    the ground beyond, and rolled straight into the
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    request content content loads web fonts load
    request content content and
    web fonts load
    

    View Slide

43. ✉️
    U I M
    

    View Slide

44. @font-face {
    font-family: MyIcons;
    src: url(myicons.woff);
    font-rendering: block infinite;
    }
    !
    .icon {
    font-family: MyIcons;
    }
    

    View Slide

45. IE9 IE10 IE11 Chrome Firefox Safari Opera Android
    No No No No No No No No
    Browser support for font-rendering
    

    View Slide

46. use javascript
    

    View Slide

47. http://w3.org/TR/css-font-loading/
    http://w3.org/TR/css-font-loading/
    

    View Slide

48. var font = new FontFace(
    ‘MyFont’,
    ‘url(myfont.woff)’,
    { weight: 400 }
    );
    !
    font.load().then(function () {
    // font has loaded
    });
    

    View Slide

49. IE9 IE10 IE11 Chrome Firefox Safari Opera Android
    No No No Yes No No Yes No
    Browser support for CSS font loading
    

    View Slide

50. http://github.com/bramstein/fontfaceobserver
    github.com/bramstein/fontfaceobserver
    

    View Slide

51. var observer = new FontFaceObserver(
    ‘MyFont’,
    { weight: 400 }
    );
    !
    observer.check().then(function () {
    // font has loaded
    });
    

    View Slide

52. …
    !
    var html = document.documentElement;
    !
    observer.check().then(function () {
    html.classList.add(“myfont-active”);
    }, function () {
    html.classList.add(“myfont-inactive”);
    });
    

    View Slide

53. 
    …
    
    !
    
    …
    
    

    View Slide

54. html {
    font-family: Verdana, sans-serif;
    }
    

    View Slide

55. html {
    font-family: Arial, sans-serif;
    }
    !
    .myfont-active {
    font-family: MyFont, Arial, sans-serif;
    }
    

    View Slide

56. In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much,
    was astonished whenever it shone in her face.
    Close by the king’s castle lay a great dark
    forest, and under an old lime-tree in the forest
    was a well, and when the day was very warm,
    the king’s child went out into the forest and sat
    down by the side of the cool fountain, and
    when she was bored she took a golden ball,
    and threw it up on high and caught it, and this
    ball was her favourite plaything.
    !
    Now it so happened that on one occasion the
    princess’s golden ball did not fall into the little
    hand which she was holding up for it, but on to
    the ground beyond, and rolled straight into the
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful that
    the sun itself, which has seen so much, was
    astonished whenever it shone in her face. Close
    by the king’s castle lay a great dark forest, and
    under an old lime-tree in the forest was a well,
    and when the day was very warm, the king’s child
    went out into the forest and sat down by the side
    of the cool fountain, and when she was bored she
    took a golden ball, and threw it up on high and
    caught it, and this ball was her favourite
    plaything.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    Request content.
    

    View Slide

57. In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much,
    was astonished whenever it shone in her face.
    Close by the king’s castle lay a great dark
    forest, and under an old lime-tree in the forest
    was a well, and when the day was very warm,
    the king’s child went out into the forest and sat
    down by the side of the cool fountain, and
    when she was bored she took a golden ball,
    and threw it up on high and caught it, and this
    ball was her favourite plaything.
    !
    Now it so happened that on one occasion the
    princess’s golden ball did not fall into the little
    hand which she was holding up for it, but on to
    the ground beyond, and rolled straight into the
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful that
    the sun itself, which has seen so much, was
    astonished whenever it shone in her face. Close
    by the king’s castle lay a great dark forest, and
    under an old lime-tree in the forest was a well,
    and when the day was very warm, the king’s child
    went out into the forest and sat down by the side
    of the cool fountain, and when she was bored she
    took a golden ball, and threw it up on high and
    caught it, and this ball was her favourite
    plaything.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    Content loads.
    Fallback fonts are
    shown. Fonts load
    asynchronously.
    Request content.
    

    View Slide

58. In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much,
    was astonished whenever it shone in her face.
    Close by the king’s castle lay a great dark
    forest, and under an old lime-tree in the forest
    was a well, and when the day was very warm,
    the king’s child went out into the forest and sat
    down by the side of the cool fountain, and
    when she was bored she took a golden ball,
    and threw it up on high and caught it, and this
    ball was her favourite plaything.
    !
    Now it so happened that on one occasion the
    princess’s golden ball did not fall into the little
    hand which she was holding up for it, but on to
    the ground beyond, and rolled straight into the
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful that
    the sun itself, which has seen so much, was
    astonished whenever it shone in her face. Close
    by the king’s castle lay a great dark forest, and
    under an old lime-tree in the forest was a well,
    and when the day was very warm, the king’s child
    went out into the forest and sat down by the side
    of the cool fountain, and when she was bored she
    took a golden ball, and threw it up on high and
    caught it, and this ball was her favourite
    plaything.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    Content loads.
    Fallback fonts are
    shown. Fonts load
    asynchronously.
    Request content.
    Fonts load and
    observer adds
    “active” class.
    Browser renders
    with web font.
    

    View Slide

59. the flash
    

    View Slide

60. example.com
    In olden times when wishing still helped one, there
    lived a king whose daughters were all beautiful, but
    the youngest was so beautiful that the sun itself,
    which has seen so much, was astonished whenever it
    shone in her face. Close by the king’s castle lay a
    great dark forest, and under an old lime-tree in the
    forest was a well, and when the day was very warm,
    the king’s child went out into the forest and sat down
    by the side of the cool fountain, and when she was
    bored she took a golden ball, and threw it up on high
    and caught it, and this ball was her favourite
    plaything.
    !
    Now it so happened that on one occasion the
    princess’s golden ball did not fall into the little hand
    which she was holding up for it, but on to the ground
    beyond, and rolled straight into the water.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    Loading example.com
    

    View Slide

61. example.com
    In olden times when wishing still helped one, there lived
    a king whose daughters were all beautiful, but the
    youngest was so beautiful that the sun itself, which has
    seen so much, was astonished whenever it shone in her
    face. Close by the king’s castle lay a great dark forest,
    and under an old lime-tree in the forest was a well, and
    when the day was very warm, the king’s child went out
    into the forest and sat down by the side of the cool
    fountain, and when she was bored she took a golden
    ball, and threw it up on high and caught it, and this ball
    was her favourite plaything.
    !
    Now it so happened that on one occasion the princess’s
    golden ball did not fall into the little hand which she was
    holding up for it, but on to the ground beyond, and rolled
    straight into the water.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    

    View Slide

62. caching
    

    View Slide

63. 30% cache hit rate
    

    View Slide

64. OTF
    Ag
    EOT
    Ag
    WOFF
    Ag
    WOFF2
    Ag
    SVG
    

    View Slide

65. OTF
    Ag
    EOT
    Ag
    WOFF
    Ag
    WOFF2
    Ag
    SVG
    

    View Slide

66. @font-face {
    font-family: My Family;
    src: url(font.woff2) format(‘woff2’),
    url(font.woff) format(‘woff’);
    }
    

    View Slide

67. IE9 IE10 IE11 Chrome Firefox Safari Opera Android
    WOFF2 No No No Yes No No Yes No
    WOFF Yes Yes Yes Yes Yes Yes Yes Yes
    OTF Yes Yes Yes Yes Yes Yes Yes Yes
    EOT Yes Yes Yes n/a n/a n/a n/a n/a
    Browser support for web font formats
    

    View Slide

68. @font-face {
    font-family: My Family;
    src: url(font.woff2) format(‘woff2’),
    url(font.woff) format(‘woff’),
    url(font.otf) format(‘opentype’);
    }
    

    View Slide

69. subset
    

    View Slide

70. A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
    À Á Â Ã Ä Ā Ă Å Ǻ Ą Æ Ǽ Ć Ĉ Č Ċ Ç Ď Đ È É Ê Ě Ë Ē Ĕ Ė
    Ę Ĝ Ğ Ġ Ģ Ĥ Ħ Ì Í Î Ĩ Ï Ī Ĭ İ Į IJ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ñ
    Ņ Ò Ó Ô Õ Ö Ō Ŏ Ő Ø Ǿ Œ Ŕ Ř Ŗ Ś Ŝ Š Ş Ș Ť Ţ Ŧ Ù Ú Û Ũ
    Ü Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ŷ Ÿ Ź Ž Ż Ŋ Ð Þ a b c d e f g
    h i j k l m n o p q r s t u v w x y z à á â ã ä ā ă å
    ǻ ą æ ǽ ć ĉ č ċ ç ď đ è é ê ě ë ē ĕ ė ę ĝ ğ ġ ģ ĥ ħ ì
    í î ĩ ï ī ĭ į ij ı ȷ ĵ ķ ĸ ĺ ľ ļ ŀ ł ń ň ñ ņ ʼn ò ó ô õ
    ö ō ŏ ő ø ǿ œ ŕ ŗ ř ś ŝ š ş ș ß ſ ť ţ ŧ ù ú û ũ ü ū ŭ
    ů ű ų ẁ ẃ ŵ ẅ ỳ ý ŷ ÿ ź ž ż ŋ ð þ ff fi ffi fl ffl & ` ´ ˆ ˇ
    ˜ ¨ ¯ ˘ ˚ ˝ ˙ ¸ ˛ , ; : 0 … ! ¡ ? ¿ “ ” „ ‹
    › « » / | - – — • · ( ) [ ] { } * † ‡ § ¶ ^ ~ ¦ \ _ @
    © ® ™ ¤ € $ ¢ £ ƒ ¥ ª º ° # 0 1 2 3 4 5 6 7 8 9 ¹ ² ³
    ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ µ ¬ Δ Ω π ∞ ∂ ∫ √
    

    View Slide

71. A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
    À Á Â Ã Ä Ā Ă Å Ǻ Ą Æ Ǽ Ć Ĉ Č Ċ Ç Ď Đ È É Ê Ě Ë Ē Ĕ Ė
    Ę Ĝ Ğ Ġ Ģ Ĥ Ħ Ì Í Î Ĩ Ï Ī Ĭ İ Į IJ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ñ
    Ņ Ò Ó Ô Õ Ö Ō Ŏ Ő Ø Ǿ Œ Ŕ Ř Ŗ Ś Ŝ Š Ş Ș Ť Ţ Ŧ Ù Ú Û Ũ
    Ü Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ŷ Ÿ Ź Ž Ż Ŋ Ð Þ a b c d e f g
    h i j k l m n o p q r s t u v w x y z à á â ã ä ā ă å
    ǻ ą æ ǽ ć ĉ č ċ ç ď đ è é ê ě ë ē ĕ ė ę ĝ ğ ġ ģ ĥ ħ ì
    í î ĩ ï ī ĭ į ij ı ȷ ĵ ķ ĸ ĺ ľ ļ ŀ ł ń ň ñ ņ ʼn ò ó ô õ
    ö ō ŏ ő ø ǿ œ ŕ ŗ ř ś ŝ š ş ș ß ſ ť ţ ŧ ù ú û ũ ü ū ŭ
    ů ű ų ẁ ẃ ŵ ẅ ỳ ý ŷ ÿ ź ž ż ŋ ð þ ff fi ffi fl ffl & ` ´ ˆ ˇ
    ˜ ¨ ¯ ˘ ˚ ˝ ˙ ¸ ˛ , ; : 0 … ! ¡ ? ¿ “ ” „ ‹
    › « » / | - – — • · ( ) [ ] { } * † ‡ § ¶ ^ ~ ¦ \ _ @
    © ® ™ ¤ € $ ¢ £ ƒ ¥ ª º ° # 0 1 2 3 4 5 6 7 8 9 ¹ ² ³
    ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ µ ¬ Δ Ω π ∞ ∂ ∫ √
    

    View Slide

72. I ❤ München
    

    View Slide

73. A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
    À Á Â Ã Ä Ā Ă Å Ǻ Ą Æ Ǽ Ć Ĉ Č Ċ Ç Ď Đ È É Ê Ě Ë Ē Ĕ Ė
    Ę Ĝ Ğ Ġ Ģ Ĥ Ħ Ì Í Î Ĩ Ï Ī Ĭ İ Į IJ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ñ
    Ņ Ò Ó Ô Õ Ö Ō Ŏ Ő Ø Ǿ Œ Ŕ Ř Ŗ Ś Ŝ Š Ş Ș Ť Ţ Ŧ Ù Ú Û Ũ
    Ü Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ŷ Ÿ Ź Ž Ż Ŋ Ð Þ a b c d e f g
    h i j k l m n o p q r s t u v w x y z à á â ã ä ā ă å
    ǻ ą æ ǽ ć ĉ č ċ ç ď đ è é ê ě ë ē ĕ ė ę ĝ ğ ġ ģ ĥ ħ ì
    í î ĩ ï ī ĭ į ij ı ȷ ĵ ķ ĸ ĺ ľ ļ ŀ ł ń ň ñ ņ ʼn ò ó ô õ
    ö ō ŏ ő ø ǿ œ ŕ ŗ ř ś ŝ š ş ș ß ſ ť ţ ŧ ù ú û ũ ü ū ŭ
    ů ű ų ẁ ẃ ŵ ẅ ỳ ý ŷ ÿ ź ž ż ŋ ð þ ff fi ffi fl ffl & ` ´ ˆ ˇ
    ˜ ¨ ¯ ˘ ˚ ˝ ˙ ¸ ˛ , ; : 0 … ! ¡ ? ¿ “ ” „ ‹
    › « » / | - – — • · ( ) [ ] { } * † ‡ § ¶ ^ ~ ¦ \ _ @
    © ® ™ ¤ € $ ¢ £ ƒ ¥ ª º ° # 0 1 2 3 4 5 6 7 8 9 ¹ ² ³
    ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ µ ¬ Δ Ω π ∞ ∂ ∫ √
    

    View Slide

74. A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
    À Á Â Ã Ä Ā Ă Å Ǻ Ą Æ Ǽ Ć Ĉ Č Ċ Ç Ď Đ È É Ê Ě Ë Ē Ĕ Ė
    Ę Ĝ Ğ Ġ Ģ Ĥ Ħ Ì Í Î Ĩ Ï Ī Ĭ İ Į IJ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ñ
    Ņ Ò Ó Ô Õ Ö Ō Ŏ Ő Ø Ǿ Œ Ŕ Ř Ŗ Ś Ŝ Š Ş Ș Ť Ţ Ŧ Ù Ú Û Ũ
    Ü Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ŷ Ÿ Ź Ž Ż Ŋ Ð Þ a b c d e f g
    h i j k l m n o p q r s t u v w x y z à á â ã ä ā ă å
    ǻ ą æ ǽ ć ĉ č ċ ç ď đ è é ê ě ë ē ĕ ė ę ĝ ğ ġ ģ ĥ ħ ì
    í î ĩ ï ī ĭ į ij ı ȷ ĵ ķ ĸ ĺ ľ ļ ŀ ł ń ň ñ ņ ʼn ò ó ô õ
    ö ō ŏ ő ø ǿ œ ŕ ŗ ř ś ŝ š ş ș ß ſ ť ţ ŧ ù ú û ũ ü ū ŭ
    ů ű ų ẁ ẃ ŵ ẅ ỳ ý ŷ ÿ ź ž ż ŋ ð þ ff fi ffi fl ffl & ` ´ ˆ ˇ
    ˜ ¨ ¯ ˘ ˚ ˝ ˙ ¸ ˛ , ; : 0 … ! ¡ ? ¿ “ ” „ ‹
    › « » / | - – — • · ( ) [ ] { } * † ‡ § ¶ ^ ~ ¦ \ _ @
    © ® ™ ¤ € $ ¢ £ ƒ ¥ ª º ° # 0 1 2 3 4 5 6 7 8 9 ¹ ² ³
    ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ µ ¬ Δ Ω π ∞ ∂ ∫ √
    

    View Slide

75. I ❤ München
    

    View Slide

76. subset with care
    

    View Slide

77. fallback fonts
    

    View Slide

78. In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful that
    the sun itself, which has seen so much, was
    astonished whenever it shone in her face.
    Body text
    Display text
    Apfelstrudel
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much,
    was astonished whenever it shone in her face.
    Apfelstrudel
    

    View Slide

79. Geogrotesque
    Geogrotesque
    Geogrotesque
    Geogrotesque
    Geogrotesque
    Geogrotesque
    Arial
    Arial
    Georgia
    Times New Roman
    Georgia
    Arial
    Arial
    Arial
    Arial Georgia
    Georgia
    Georgia
    Georgia
    Times New Roman
    Times New Roman
    Times New Roman
    Times New Roman
    Times New Roman
    

    View Slide

80. fontfamily.io
    http://fontfamily.io
    

    View Slide

81. a x j d
    x-height
    baseline
    

    View Slide

82. a a
    a
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the
    youngest was so beautiful
    that the sun itself, which has
    seen so much, was
    astonished whenever it
    shone in her face.
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the youngest
    was so beautiful that the sun
    itself, which has seen so
    much, was astonished
    whenever it shone in her
    face.
    In olden times when
    wishing still helped one,
    there lived a king whose
    daughters were all
    beautiful, but the youngest
    was so beautiful that the
    sun itself, which has seen
    so much, was astonished
    whenever it shone in her
    face.
    web font fallback A fallback B
    

    View Slide

83. example.com
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much,
    was astonished whenever it shone in her
    face.
    !
    Close by the king’s castle lay a great dark
    forest, and under an old lime-tree in the
    forest was a well, and when the day was
    very warm, the king’s child went out into the
    forest and sat down by the side of the cool
    fountain, and when she was bored she took
    a golden ball, and threw it up on high and
    caught it, and this ball was her favourite
    plaything. fallback
    

    View Slide

84. example.com
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much, was
    astonished whenever it shone in her face.
    !
    Close by the king’s castle lay a great dark forest,
    and under an old lime-tree in the forest was a
    well, and when the day was very warm, the
    king’s child went out into the forest and sat
    down by the side of the cool fountain, and when
    she was bored she took a golden ball, and threw
    it up on high and caught it, and this ball was her
    favourite plaything.
    web font
    

    View Slide

85. a a
    a
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the
    youngest was so beautiful
    that the sun itself, which has
    seen so much, was
    astonished whenever it
    shone in her face.
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the youngest
    was so beautiful that the sun
    itself, which has seen so
    much, was astonished
    whenever it shone in her
    face.
    In olden times when
    wishing still helped one,
    there lived a king whose
    daughters were all
    beautiful, but the youngest
    was so beautiful that the
    sun itself, which has seen
    so much, was astonished
    whenever it shone in her
    face.
    web font fallback A fallback B
    

    View Slide

86. a a
    a
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the
    youngest was so beautiful
    that the sun itself, which has
    seen so much, was
    astonished whenever it
    shone in her face.
    In olden times when
    wishing still helped one,
    there lived a king whose
    daughters were all beautiful,
    but the youngest was so
    beautiful that the sun itself,
    which has seen so much,
    was astonished whenever it
    shone in her face.
    In olden times when wishing
    still helped one, there lived a
    king whose daughters were
    all beautiful, but the
    youngest was so beautiful
    that the sun itself, which has
    seen so much, was
    astonished whenever it
    shone in her face.
    +7% -8%
    web font fallback A fallback B
    

    View Slide

87. example.com
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much, was
    astonished whenever it shone in her face.
    !
    Close by the king’s castle lay a great dark forest,
    and under an old lime-tree in the forest was a
    well, and when the day was very warm, the
    king’s child went out into the forest and sat
    down by the side of the cool fountain, and when
    she was bored she took a golden ball, and threw
    it up on high and caught it, and this ball was her
    favourite plaything.
    fallback
    

    View Slide

88. example.com
    In olden times when wishing still helped one,
    there lived a king whose daughters were all
    beautiful, but the youngest was so beautiful
    that the sun itself, which has seen so much, was
    astonished whenever it shone in her face.
    !
    Close by the king’s castle lay a great dark forest,
    and under an old lime-tree in the forest was a
    well, and when the day was very warm, the
    king’s child went out into the forest and sat
    down by the side of the cool fountain, and when
    she was bored she took a golden ball, and threw
    it up on high and caught it, and this ball was her
    favourite plaything.
    web font
    

    View Slide

89. body {
    font-family: MyFont, Arial, sans-serif;
    font-size: 22px;
    font-size-adjust: 0.5;
    }
    

    View Slide

90. IE9 IE10 IE11 Chrome Firefox Safari Opera Android
    No No No Yes Yes No Yes No
    Browser support for font-size-adjust
    

    View Slide

91. body {
    font-family: Arial, sans-serif;
    font-size: 21px;
    }
    !
    .myfont-active {
    font-family: MyFont, Arial, sans-serif;
    font-size: 22px;
    }
    

    View Slide

92. FOUT
    subset
    fallback fonts
    

    View Slide

93. before
    

    View Slide

94. example.com
    Loading example.com
    before
    

    View Slide

95. example.com
    In olden times when wishing still helped one, there lived
    a king whose daughters were all beautiful, but the
    youngest was so beautiful that the sun itself, which has
    seen so much, was astonished whenever it shone in her
    face. Close by the king’s castle lay a great dark forest,
    and under an old lime-tree in the forest was a well, and
    when the day was very warm, the king’s child went out
    into the forest and sat down by the side of the cool
    fountain, and when she was bored she took a golden
    ball, and threw it up on high and caught it, and this ball
    was her favourite plaything.
    !
    Now it so happened that on one occasion the princess’s
    golden ball did not fall into the little hand which she was
    holding up for it, but on to the ground beyond, and rolled
    straight into the water.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    before
    

    View Slide

96. example.com
    after
    

    View Slide

97. example.com
    Loading example.com
    THE FROG KING, OR IRON HENRY
    In olden times when wishing still helped one, there lived
    a king whose daughters were all beautiful, but the
    youngest was so beautiful that the sun itself, which has
    seen so much, was astonished whenever it shone in her
    face. Close by the king’s castle lay a great dark forest,
    and under an old lime-tree in the forest was a well, and
    when the day was very warm, the king’s child went out
    into the forest and sat down by the side of the cool
    fountain, and when she was bored she took a golden
    ball, and threw it up on high and caught it, and this ball
    was her favourite plaything.
    !
    Now it so happened that on one occasion the princess’s
    golden ball did not fall into the little hand which she was
    holding up for it, but on to the ground beyond, and rolled
    straight into the water.
    The Brothers Grimm
    Grimm’s Household Tales
    after
    

    View Slide

98. example.com
    In olden times when wishing still helped one, there lived
    a king whose daughters were all beautiful, but the
    youngest was so beautiful that the sun itself, which has
    seen so much, was astonished whenever it shone in her
    face. Close by the king’s castle lay a great dark forest,
    and under an old lime-tree in the forest was a well, and
    when the day was very warm, the king’s child went out
    into the forest and sat down by the side of the cool
    fountain, and when she was bored she took a golden
    ball, and threw it up on high and caught it, and this ball
    was her favourite plaything.
    !
    Now it so happened that on one occasion the princess’s
    golden ball did not fall into the little hand which she was
    holding up for it, but on to the ground beyond, and rolled
    straight into the water.
    The Frog King, or Iron Henry
    The Brothers Grimm
    Grimm’s Household Tales
    after
    

    View Slide

99. FOUT is a feature
    

    View Slide

100. THE CONSEQUENCES OF
     WEB FONTS
     @bram_stein
     Geogrotesque by Emtype
     Source Code Pro by Paul D. Hunt
     

     View Slide