Web Fonts Performance

Web fonts are great. They are also be really bad for front-end performance because they block rendering. You may have experienced this on a slow cellular network. Staring at a blank page is no fun, especially when the content has already loaded.

This talk explores why browser have placed fonts on the critical path, and how we can work around this while still delivering a good user experience. It also takes a look at what the future will bring to web font performance: preloading hints, the font-display property, and HTTP/2.

Transcript

1. Web Fonts
   Performance
   @bram_stein
   

   View Slide

2. 25%
   50%
   75%
   2012 2013 2014 2015
   Web Font Usage
   Source: HTTP Archive
   

   View Slide

3. 1
   2
   3
   2012 2013 2014 2015
   Font Requests
   Source: HTTP Archive
   

   View Slide

4. 30kB
   60kB
   90kB
   120kB
   2012 2013 2014 2015
   Font Size
   Source: HTTP Archive
   

   View Slide

5. 300kB of web fonts
   (2.8 × 107kB)
   

   View Slide

6. @font-face {
   font-family: Elena;
   src: url(font.woff2) format(“woff2”),
   url(font.woff) format(“woff”);
   }
   

   View Slide

7. A web font is only downloaded
   when it is used in a CSS selector
   that matches a DOM connected
   node.
   

   View Slide

8. Hello!
   @font-face {
   font-family: Elena;
   src: url(font.woff2) format(“woff2”),
   url(font.woff) format(“woff”);
   }
   

   View Slide

9. Hello!
   @font-face {
   font-family: Elena;
   src: url(font.woff2) format(“woff2”),
   url(font.woff) format(“woff”);
   }
   p {
   font-family: Elena, Georgia, serif;
   }
   

   View Slide

10. Regular.woff Bold.woff Italic.woff
    Lazy loading of fonts
    Home About
    Products Stores
    

    View Slide

11. Regular.woff Bold.woff Italic.woff
    Lazy loading of fonts
    Home About
    Products Stores
    

    View Slide

12. Regular.woff Bold.woff Italic.woff
    Lazy loading of fonts
    Home About
    Products Stores
    

    View Slide

13. @font-face {
    font-family: Font A;
    src: url(fonta.woff);
    }
    @font-face {
    font-family: Font B;
    src: url(fontb.woff);
    }
    Font Loading
    

    View Slide

14. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    Font Loading
    400 MS
    HTML
    FONT A
    FONT B
    HTML
    

    View Slide

15. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    Font Loading
    400 MS
    HTML
    FONT A
    FONT B
    CSS
    

    View Slide

16. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    Font Loading
    400 MS
    HTML
    FONT A
    FONT B
    CSS
    

    View Slide

17. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    font loading starts
    Font Loading
    400 MS
    HTML
    FONT A
    FONT B
    CSS
    FONT A
    FONT B
    

    View Slide

18. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    font loading starts
    Font Loading
    400 MS
    HTML
    FONT A
    FONT B
    font a is rendered
    CSS
    FONT B
    

    View Slide

19. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    font loading starts
    Font Loading
    400 MS
    HTML
    FONT A
    FONT B
    web fonts are rendered
    CSS
    

    View Slide

20. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    font loading starts
    Font Loading
    400 MS
    HTML
    FONT A
    web fonts are rendered
    FONT B
    CSS
    

    View Slide

21. FOUT versus FOIT
    Flash Of (Unstyled|Invisible) Text
    

    View Slide

22. 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

23. A
    

    View Slide

24. A
    

    View Slide

25. example.com
    A
    

    View Slide

26. 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
    A
    

    View Slide

27. 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
    A
    

    View Slide

28. B
    

    View Slide

29. B
    

    View Slide

30. example.com
    B
    

    View Slide

31. example.com
    Loading example.com
    B
    

    View Slide

32. 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
    B
    

    View Slide

33. ?
    

    View Slide

34. A
    

    View Slide

35. A
    

    View Slide

36. example.com
    A
    

    View Slide

37. 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
    A
    

    View Slide

38. 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
    A
    

    View Slide

39. B
    

    View Slide

40. B
    

    View Slide

41. example.com
    B
    

    View Slide

42. example.com
    B
    

    View Slide

43. 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
    B
    

    View Slide

44. ?
    

    View Slide

45. 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

46. Chrome Firefox Safari Opera IE9 IE10 IE11 Edge
    FOIT FOIT FOIT FOIT FOUT FOUT FOUT FOUT
    FOUT versus FOIT
    

    View Slide

47. Chrome Firefox Safari Opera IE9 IE10 IE11 Edge
    FOIT FOIT FOIT FOIT FOUT FOUT FOUT FOUT
    3 sec. 3 sec. ∞ 3 sec. n/a n/a n/a n/a
    FOUT versus FOIT
    

    View Slide

48. FOUT is progressive
    enhancement
    

    View Slide

49. Flash Of Fallback Text
    (FOFT — for the acronym lovers)
    

    View Slide

50. CSS font-display
    (coming soon)
    

    View Slide

51. @font-face {
    font-family: My Font;
    src: url(myfont.woff);
    font-display: auto|block|swap|fallback|optional;
    }
    CSS font-display
    

    View Slide

52. @font-face {
    …
    font-display: block;
    }
    CSS font-display
    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 page start loading web fonts web fonts loaded
    

    View Slide

53. CSS font-display
    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 page start loading web fonts web fonts loaded
    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-face {
    …
    font-display: swap;
    }
    

    View Slide

54. CSS font-display
    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 page start loading web fonts web fonts loaded
    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-face {
    …
    font-display: fallback; /* load inside timeout */
    }
    

    View Slide

55. CSS font-display
    request page start loading web fonts web fonts loaded
    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-face {
    …
    font-display: fallback; /* load outside timeout */
    }
    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
    

    View Slide

56. CSS font-display
    request page start loading web fonts web fonts loaded
    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-face {
    …
    font-display: optional; /* uncached */
    }
    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
    

    View Slide

57. CSS font-display
    request page web fonts loaded
    @font-face {
    …
    font-display: 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
    

    View Slide

58. No browser support?
    Use JavaScript.
    

    View Slide

59. Web Font Loader
    github.com/typekit/webfontloader
    

    View Slide

60. .wf-loading {
    /* styles to use when web fonts are loading */
    }
    .wf-active {
    /* styles to use when web fonts are active */
    }
    .wf-inactive {
    /* styles to use when web fonts are inactive */
    }
    Web Font Loader
    

    View Slide

61. Font Face Observer
    github.com/bramstein/fontfaceobserver
    github.com/bramstein/fontfaceobserver
    

    View Slide

62. var elena = new FontFaceObserver(‘Elena’);
    elena.check().then(function () {
    // font is loaded
    });
    Font Face Observer
    

    View Slide

63. CSS Font Loading API
    w3.org/TR/css-font-loading
    

    View Slide

64. var font = new FontFace(‘Elena’, ‘url(font.woff)’);
    font.load().then(function () {
    // font is loaded
    });
    CSS Font Loading API
    

    View Slide

65. IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android
    No No No No Yes No† No* Yes No
    CSS Font Loading API
    † In progress
    * Almost in progress
    

    View Slide

66. Dealing with the Flash
    

    View Slide

67. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    Faster Loading
    400 MS
    HTML
    FONT A
    FONT B
    font loading starts + fallback fonts render font events fire + web fonts render
    CSS
    

    View Slide

68. Faster Loading
    500 MS 600 MS 700 MS
    400 MS
    CONNECT WAIT TRANSFER
    CONNECT WAIT TRANSFER
    FONT A
    FONT B
    

    View Slide

69. Compression
    WOFF + WOFF2. Done.
    

    View Slide

70. @font-face {
    font-family: My Family;
    src: url(myfont.woff2) format(“woff2”),
    url(myfont.woff) format(“woff”);
    }
    New bulletproof @font-face
    

    View Slide

71. Subsetting
    

    View Slide

72. 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

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. Faster Loading
    500 MS 600 MS 700 MS
    400 MS
    CONNECT WAIT TRANSFER
    CONNECT WAIT TRANSFER
    FONT A
    FONT B
    

    View Slide

75. Faster Loading
    500 MS 600 MS 700 MS
    400 MS
    CONNECT WAIT TRANSFER
    CONNECT WAIT TRANSFER
    FONT A
    FONT B
    

    View Slide

76. Faster Loading
    500 MS 600 MS 700 MS
    400 MS
    CONNECT WAIT TRANSFER
    CONNECT WAIT TRANSFER
    FONT A
    FONT B
    ~30ms faster
    

    View Slide

77. Latency is the real
    performance killer
    

    View Slide

78. View Slide

79. View Slide

80. Faster Loading
    500 MS 600 MS 700 MS
    400 MS
    CONNECT WAIT TRANSFER
    CONNECT WAIT TRANSFER
    FONT A
    FONT B
    ~30ms faster
    

    View Slide

81. Faster Loading
    500 MS 600 MS 700 MS
    400 MS
    CONNECT WAIT TRANSFER
    CONNECT WAIT TRANSFER
    FONT A
    FONT B
    ~90ms faster
    

    View Slide

82. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    Faster Loading
    400 MS
    HTML
    FONT A
    FONT B
    font loading starts web fonts render
    CSS
    

    View Slide

83. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    Faster Loading
    400 MS
    HTML
    FONT A
    FONT B
    font loading starts web fonts render
    CSS
    

    View Slide

84. Lazy loading is bad
    (For web fonts)
    

    View Slide

85. Preload instructions
    (Also coming soon)
    

    View Slide

86. 
    …
    
    
    Link: ; rel=preload; as=font
    Preload
    

    View Slide

87. Preload
    
    …
    
    
    Link: ; rel=preload; as=font
    

    View Slide

88. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    Preload
    400 MS
    HTML
    FONT A
    FONT B
    font loading starts web fonts render
    CSS
    

    View Slide

89. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    Preload
    400 MS
    HTML
    FONT A
    FONT B
    font loading starts web fonts render
    CSS
    

    View Slide

90. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    Preload
    400 MS
    HTML
    FONT A
    FONT B
    font loading starts web fonts render
    ~270ms faster
    CSS
    

    View Slide

91. 
    …
    
    
    Link: ; rel=prefetch
    Prefetch
    

    View Slide

92. IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android
    No No Yes Yes Yes Yes No Yes Yes
    Prefetch browser support
    

    View Slide

93. HTTP/2 server push
    

    View Slide

94. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    Preload
    400 MS
    HTML
    FONT A
    FONT B
    font loading starts web fonts render
    CSS
    

    View Slide

95. IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android
    No No Yes† Yes Yes Yes No* Yes No
    HTTP/2 browser support
    † Only in Windows 10
    * HTTP/2 support is coming in Safari 9
    Warn that this should only be
    used for your most important
    content.
    

    View Slide

96. Critical CSS fonts
    

    View Slide

97. web font anti-patterns
    (it seemed like a good idea at the time…)
    

    View Slide

98. Using web fonts
    (for everything)
    

    View Slide

99. View Slide

100. inlining fonts
     (OMG… it’s full of base64)
     

     View Slide

101. @font-face {
     font-family: My Family;
     font-weight: 400;
     src: url(data:font/opentype;base64,d09GRgABA…);
     }
     @font-face {
     font-family: My Family;
     font-weight: 600;
     src: url(data:font/opentype;base64,d09GRgABA…);
     }
     …
     Inlining Fonts
     

     View Slide

102. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
     Inlining Fonts
     400 MS
     HTML
     FONT A
     FONT B
     CSS
     FONT C
     

     View Slide

103. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
     Inlining Fonts
     400 MS
     HTML
     FONT A + FONT B + FONT C
     FONT B
     CSS
     FONT C
     

     View Slide

104. Benefits
     • Avoids HTTP overhead
     

     View Slide

105. Downsides
     • Breaks parallel downloads
     • Only supports a single font format
     • No progressive rendering
     • Caching
     

     View Slide

106. Reimplement caching
     (Guardian & Smashing Magazine)
     

     View Slide

107. if (localStorage.fonts) {
     insertStylesheet(localStorage.fonts);
     } else {
     var request = new XMLHttpRequest();
     request.open(‘GET’, ‘myfonts.css’);
     request.onload = function () {
     var fonts = request.responseText;
     localStorage.fonts = fonts;
     insertStylesheet(fonts);
     };
     request.send();
     }
     

     View Slide

108. Benefits
     • Fonts are requested once
     • Avoids lazy loading
     • Avoids FOUT/FOIT in most browsers
     • Optimises for frequent visitors
     

     View Slide

109. Downsides
     • Same downsides as inlining
     • Pollutes localStorage of casual visitors
     • Custom cache mechanism
     • Licensing
     

     View Slide

110. Keep it simple
     (but not stupid)
     

     View Slide

111. @font-face {
     font-family: My Family;
     font-weight: 400;
     src: url(myfamily.woff2) format(“woff2”),
     url(myfamily.woff) format(“woff”);
     }
     body {
     font-family: sans-serif;
     }
     .fonts-loaded body {
     font-family: My Family, sans-serif;
     }
     

     View Slide

112. <br/>(function(){'use strict';function h(a){document.body?…<br/>
     <br/>var myfamily = new FontFaceObserver(‘My Family’);<br/>myfamily.check().then(function () {<br/>var html = document.documentElement;<br/>html.classList.add(‘fonts-loaded’);<br/>});<br/>
     

     View Slide

113. Benefits
     • Fonts load as soon as possible
     • Consistent FOUT in all browsers
     • Re-use the browser cache
     • Support multiple formats
     • Fonts are downloaded in parallel
     

     View Slide

114. Downsides
     • Requires a (little) bit of code
     • FOUT on each request
     

     View Slide

115. <br/>var myfamily = new FontFaceObserver(‘My Family’);<br/>myfamily.check().then(function () {<br/>var html = document.documentElement;<br/>html.classList.add(‘fonts-loaded’);<br/>sessionStorage.fontsloaded = true;<br/>});<br/>
     

     View Slide

116. <br/>if (sessionStorage.fontsloaded) {<br/>var html = document.documentElement;<br/>html.classList.add(‘fonts-loaded’);<br/>}<br/>
     

     View Slide

117. Downsides
     • Requires a (little) bit of code
     • FOUT on each request
     

     View Slide

118. font loading strategy
     1
     

     View Slide

119. optimise start & load
     2
     

     View Slide

120. fonts are enhancement
     3
     

     View Slide

121. Web Fonts
     Performance
     @bram_stein
     https://www.bramstein.com
     FF Enzo by Tobias Kvant
     Source Code Pro by Paul D. Hunt
     

     View Slide