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

Web Fonts Performance

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.

Bram Stein

April 01, 2016
Tweet

More Decks by Bram Stein

Other Decks in Technology

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