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

Fontastic web performance

Fontastic web performance

Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost — if you don’t load web fonts efficiently, what you get instead are phantom underlines, blank pages, and user rage. Let’s talk about ways to avoid this, and what new platform features are here to help us deliver pretty (but also!) fast experiences to everyone.

Monica Dinculescu

October 18, 2017
Tweet

More Decks by Monica Dinculescu

Other Decks in Programming

Transcript

  1. WEB PERFORMANCE
    FONTASTIC

    View full-size slide

  2. of websites
    use web fonts
    68%

    View full-size slide


  3. @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'),
    url(https://font.woff2) format('woff2');
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
    }

    View full-size slide


  4. @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'),
    url(https://font.woff2) format('woff2');
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
    }
    div {
    font-family: Roboto, sans-serif;
    }

    View full-size slide

  5. THE MITT ROMNEY
    WEB FONT PROBLEM
    /ZACH LEATHERMAN

    View full-size slide

  6. THE BROWSER HAS
    A TON OF OPINIONS

    View full-size slide

  7. THE BROWSER HAS
    A TON OF OPINIONS
    ESPECIALLY ABOUT FONTS

    View full-size slide

  8. …/css?family=Roboto:400

    View full-size slide

  9. …/css?family=Roboto:400
    @font-face {
    font-family: ‘Roboto’; font-style: normal; font-weight: 400;
    src: local('Roboto'), url(https://font.woff2) format('woff2');
    }

    View full-size slide

  10. div { font-family: Roboto, sans-serif; }

    View full-size slide

  11. @font-face {
    font-family: ‘Roboto’; font-style: normal; font-weight: 400;
    src: local('Roboto'), url(https://font.woff2) format('woff2');
    }

    View full-size slide

  12. div { font-family: Roboto, sans-serif; }
    Do I HAVE Roboto YET?

    View full-size slide

  13. div { font-family: Roboto, sans-serif; }

    RENDER

    View full-size slide

  14. div { font-family: Roboto, sans-serif; }
    RENDER
    BLOCK

    View full-size slide

  15. div { font-family: Roboto, sans-serif; }
    RENDER
    BLOCK
    Do I HAVE Roboto YET?

    View full-size slide

  16. div { font-family: Roboto, sans-serif; }
    RENDER
    BLOCK

    View full-size slide

  17. div { font-family: Roboto, sans-serif; }
    RENDER
    BLOCK

    SWAP

    View full-size slide

  18. div { font-family: Roboto, sans-serif; }
    RENDER
    BLOCK
    SWAP
    Do I HAVE Roboto YET?

    View full-size slide

  19. div { font-family: Roboto, sans-serif; }
    RENDER
    BLOCK
    SWAP

    View full-size slide

  20. div { font-family: Roboto, sans-serif; }
    RENDER
    BLOCK
    SWAP
    FAIL

    View full-size slide

  21. WHICH LOOKS LIKE THIS

    View full-size slide

  22. FOIT FOUT
    BLOCK SWAP

    View full-size slide

  23. AMAZING.
    now what.

    View full-size slide

  24. FOIT IS
    WAAAY
    WORSE THAN FOUT

    View full-size slide

  25. MINIMIZE FOIT
    YOU COULD JUST... NOT... USE WEBFONTS

    View full-size slide

  26. MINIMIZE FOIT
    SHAKE IT OFF

    View full-size slide

  27. MINIMIZE FOIT
    DOWNLOAD FEWER THINGS

    View full-size slide

  28. MINIMIZE FOIT
    DOWNLOAD FEWER THINGS
    @font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: local('Roboto'), url(https://font.woff2) format(‘woff2');
    }

    View full-size slide

  29. MINIMIZE FOIT
    DOWNLOAD EVEN FEWER THINGS

    View full-size slide

  30. MINIMIZE FOIT
    DOWNLOAD EVEN FEWER THINGS
    @font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: local('Roboto'), url(https://font.woff2) format('woff2');
    unicode-range: U+0-A0;
    }

    View full-size slide

  31. MINIMIZE FOIT
    DOWNLOAD EVEN FEWER THINGS EARLIER

    View full-size slide

  32. MINIMIZE FOIT
    @font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: local('Roboto'), url(https://font.woff2) format(‘woff2');
    }
    DOWNLOAD EVEN FEWER THINGS EARLIER

    View full-size slide

  33. MINIMIZE FOIT
    @font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: local('Roboto'), url(https://font.woff2) format(‘woff2');
    }
    as="font" type="font/woff2" crossorigin>
    DOWNLOAD EVEN FEWER THINGS EARLIER

    View full-size slide

  34. MINIMIZE FOIT
    FONT FACE OBSERVER

    View full-size slide

  35. MINIMIZE FOIT
    FONT FACE OBSERVER
    body {
    font-family: 'Roboto', sans-serif;
    }

    View full-size slide

  36. MINIMIZE FOIT
    FONT FACE OBSERVER
    body.fonts-loaded {
    font-family: 'Roboto', sans-serif;
    }
    body {
    font-family: sans-serif;
    }

    View full-size slide

  37. MINIMIZE FOIT
    FONT FACE OBSERVER
    var font = new FontFaceObserver('Roboto');
    font.load().then(function () {
    });

    View full-size slide

  38. MINIMIZE FOIT
    FONT FACE OBSERVER
    var font = new FontFaceObserver('Roboto');
    font.load().then(function () {
    document.body.classList.add(‘fonts-loaded');
    });

    View full-size slide

  39. MINIMIZE FOIT
    CONTROL THE BLOCK/SWAP PERIOD

    View full-size slide

  40. MINIMIZE FOIT
    FONT-DISPLAY: OPTIONAL

    View full-size slide

  41. MINIMIZE FOIT
    FONT-DISPLAY: OPTIONAL

    View full-size slide

  42. MINIMIZE FOIT
    FONT-DISPLAY: OPTIONAL
    @font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: local('Roboto'), url(https://font.woff2) format(‘woff2’);
    }

    View full-size slide

  43. MINIMIZE FOIT
    FONT-DISPLAY: OPTIONAL
    @font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: local('Roboto'), url(https://font.woff2) format(‘woff2’);
    font-display: optional;
    }

    View full-size slide

  44. INVISIBLE
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms

    View full-size slide

  45. FALLBACK
    INVISIBLE
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms

    View full-size slide

  46. FALLBACK
    INVISIBLE WEBFONT
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms

    View full-size slide

  47. FALLBACK
    INVISIBLE WEBFONT
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms

    View full-size slide

  48. FALLBACK
    INVISIBLE WEBFONT
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms

    View full-size slide

  49. FALLBACK
    INVISIBLE WEBFONT
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms

    View full-size slide

  50. FALLBACK
    INVISIBLE WEBFONT
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms
    3S

    View full-size slide

  51. FALLBACK
    INVISIBLE WEBFONT
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms
    3S

    View full-size slide

  52. FALLBACK
    INVISIBLE WEBFONT
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms
    3S

    View full-size slide

  53. FALLBACK
    INVISIBLE WEBFONT
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms
    3S

    View full-size slide

  54. FALLBACK
    INVISIBLE WEBFONT
    BLOCK
    SWAP
    FALLBACK
    OPTIONAL
    3s
    100ms
    0S
    100ms
    3S

    View full-size slide

  55. https://font-display.glitch.me

    View full-size slide

  56. MINIMIZE FOIT ✅

    View full-size slide

  57. MINIMIZE FOIT ✅
    MINIMIZE FOUT

    View full-size slide

  58. MINIMIZE FOUT
    BE LESS JARRING

    View full-size slide

  59. https://meowni.ca/font-style-matcher

    View full-size slide

  60. FUNSIES WITH
    web fonts
    BONUS

    View full-size slide

  61. MAKE YOUR OWN!

    View full-size slide

  62. MAKE YOUR OWN!
    STEP 1: DRAW SOME THINGS

    View full-size slide

  63. MAKE YOUR OWN!
    STEP 2: THERE IS NO STEP 2

    View full-size slide

  64. http://fontastic.me

    View full-size slide

  65. COLOUR FONTS?

    View full-size slide

  66. https://typewithpride.COM

    View full-size slide

  67. VARIABLE FONTS

    View full-size slide

  68. VARIABLE FONTS
    BASICALLY SORCERY

    View full-size slide

  69. div {
    font-family: 'AmstelvarAlpha Default';
    font-size: 192px;
    font-variation-settings:
    'wght' 98.4113, 'wdth' 402;
    }

    View full-size slide

  70. https://AXIS-PRAXIS.org

    View full-size slide

  71. https://AXIS-PRAXIS.org

    View full-size slide

  72. div {
    font-family: ''Buffalo Gals Regular'';
    font-size: 192px;
    font-variation-settings:
    'CK ' -1, 'FR ' -0.929784,
    'HV ' -1, 'CN ' -0.902336,
    ‘BR ' 0.549087, 'TC ' 0;
    }

    View full-size slide

  73. https://AXIS-PRAXIS.org

    View full-size slide

  74. / bram stein - webfoNt handbook
    / helen holmes - type is your right
    / JAKE ARCHIBALD - minimising-font-downloads
    / every zach Leatherman BLOG post ever

    View full-size slide

  75. THANKS!
    Noun Project: Smile by Clara Joy, Tubby Cat by Lauren Manninen, Exclamation by Kevin, Wink, Balloon, Microphone by Julien Deveaux,
    Ghost by Ted Meltok, Crazy Happy Creature by Tawny Whatmore, Cloud by Viraj, Web Page by Rajakumara, Settings by Akriti Bhusal,
    Dead cat by Erika Jasso, Wizard hat by Magicon, Rainbow by Grégory Montigny, Lettering by Carlo Pico, Icons by Setyo Ari Wibowo

    View full-size slide