Web Fonts Performance

Web fonts are great. They are also be really bad for 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 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. We’ll also take a look at what the future will bring to web font performance: preloading hints and the new font-display property.

Transcript

1. Web Fonts
   Performance
   @bram_stein
   

   View Slide

2. 60% use web fonts
   

   View Slide

3. 400kB of web fonts
   

   View Slide

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

5. A
   

   View Slide

6. A
   

   View Slide

7. example.com
   A
   

   View Slide

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

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

10. B
    

    View Slide

11. B
    

    View Slide

12. example.com
    B
    

    View Slide

13. example.com
    Loading example.com
    B
    

    View Slide

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

15. ?
    

    View Slide

16. A
    

    View Slide

17. A
    

    View Slide

18. example.com
    A
    

    View Slide

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

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

21. B
    

    View Slide

22. B
    

    View Slide

23. example.com
    B
    

    View Slide

24. example.com
    B
    

    View Slide

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

26. ?
    

    View Slide

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

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

    View Slide

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

30. FOUT is progressive
    enhancement
    

    View Slide

31. Flash Of Fallback Text
    

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

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

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

45. @font-face {
    font-family: Elena;
    src: url(elena.woff);
    font-display: auto|block|swap|fallback|optional;
    }
    CSS font-display
    

    View Slide

46. @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

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

48. 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;
    }
    

    View Slide

49. 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; /* empty cache */
    }
    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

50. CSS font-display
    request page web fonts loaded
    @font-face {
    …
    font-display: optional; /* fonts in cache */
    }
    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

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

    View Slide

52. Compression
    WOFF + WOFF2
    

    View Slide

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

    View Slide

54. Subsetting
    

    View Slide

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

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

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

    View Slide

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

    View Slide

59. Lazy loading is bad
    (for web fonts)
    

    View Slide

60. Preload instructions
    

    View Slide

61. Preload
    
    …
    type=“font/woff”>
    
    Link: ; rel=preload; as=font;
    type=‘font/woff’
    

    View Slide

62. Preload
    
    …
    type=“font/woff”>
    
    Link: ; rel=preload; as=font;
    type=‘font/woff’
    

    View Slide

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

    View Slide

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

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

66. No browser support?
    Use JavaScript.
    

    View Slide

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

    View Slide

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

    View Slide

69. font loading patterns
    

    View Slide

70. grouping fonts
    

    View Slide

71. var normal = new FontFace(‘Output Sans’, …);
    var italic = new FontFace(‘Output Sans’, …);
    Promise.all([
    normal.load(),
    italic.load()
    ]).then(function () {
    // Output Sans regular and italic loaded.
    });
    

    View Slide

72. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    font loading starts
    400 MS
    NORMAL
    ITALIC
    Output Sans regular and italic loaded.
    

    View Slide

73. loading with timeout
    

    View Slide

74. function timer(time) {
    return new Promise(function (resolve, reject) {
    setTimeout(reject, time);
    });
    }
    

    View Slide

75. var elena = new FontFace(‘Elena’, ‘url(elena.woff)’);
    Promise.race([
    timer(300),
    elena.load()
    ]).then(function () {
    // Elena has loaded.
    }).catch(function () {
    // Elena failed to load or timed out.
    });
    

    View Slide

76. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    font loading starts
    400 MS
    ELENA
    TIMER
    Elena has loaded.
    

    View Slide

77. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    font loading starts
    400 MS
    ELENA
    Timeout
    TIMER
    

    View Slide

78. prioritised loading
    

    View Slide

79. var primary = new FontFace(‘Primary Font’, …);
    var secondary = new FontFace(‘Secondary Font’, …);
    primary.load().then(function () {
    // Primary font has loaded
    secondary.load().then(function () {
    // Secondary font has loaded
    });
    });
    

    View Slide

80. 100 MS 200 MS 300 MS 500 MS 600 MS 700 MS
    font loading starts
    400 MS
    PRIMARY
    SECONDARY
    Primary font has loaded. Secondary font has loaded.
    

    View Slide

81. font display
    

    View Slide

82. var elena = new FontFace(‘Elena’, ‘url(elena.woff)’);
    var html = document.documentElement;
    html.classList.add(‘fonts-loading’);
    elena.load().then(function () {
    html.classList.remove(‘fonts-loading’);
    html.classList.add(‘fonts-loaded’);
    }).catch(function () {
    html.classList.remove(‘fonts-loading’);
    html.classList.add(‘fonts-failed’);
    });
    

    View Slide

83. body {
    font-family: sans-serif;
    }
    .fonts-loaded body {
    font-family: Elena, sans-serif;
    }
    font-display: swap
    

    View Slide

84. font-display: block
    .fonts-loading body {
    visibility: hidden;
    }
    .fonts-loaded body, .fonts-failed body {
    visibility: visible;
    }
    

    View Slide

85. optimising cached
    experience
    

    View Slide

86. Optimising cached experience
    …
    elena.load().then(function () {
    html.classList.remove(‘fonts-loading’);
    html.classList.add(‘fonts-loaded’);
    sessionStorage.fontsLoaded = true;
    }).catch(function () {
    …
    });
    

    View Slide

87. if (sessionStorage.fontsloaded) {
    var html = document.documentElement;
    html.classList.add(‘fonts-loaded’);
    }
    Optimising cached experience
    

    View Slide

88. www.bramstein.com/writing/
    web-font-loading-patterns.html
    

    View Slide

89. IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android
    No No No No Yes Yes No* Yes Yes
    CSS Font Loading API
    * In progress
    

    View Slide

90. Font Face Observer
    fontfaceobserver.com
    fontfaceobserver.com
    

    View Slide

91. var elena = new FontFaceObserver(‘Elena’, …);
    elena.load().then(function () {
    // font is loaded
    });
    Font Face Observer
    

    View Slide

92. @font-face {
    font-family: Elena;
    src: url(elena.woff2) format(“woff2”),
    url(elena.woff) format(“woff”);
    }
    Font Face Observer
    

    View Slide

93. optimise start & load
    1
    

    View Slide

94. font loading strategy
    2
    

    View Slide

95. fonts are enhancement
    3
    

    View Slide

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

    View Slide