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.

053e75a5b48b44d6dd0612795dfb326d?s=128

Monica Dinculescu

October 18, 2017
Tweet

Transcript

  1. WEB PERFORMANCE FONTASTIC

  2. @notwaldorf

  3. of websites use web fonts 68%

  4. None
  5. None
  6. None
  7. None
  8. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  9. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> @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; }
  10. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> @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; }
  11. THE MITT ROMNEY WEB FONT PROBLEM /ZACH LEATHERMAN “

  12. None
  13. None
  14. FOUT I

  15. FOUT FOUT I

  16. THE BROWSER HAS A TON OF OPINIONS

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

  18. index.html

  19. index.html

  20. None
  21. None
  22. <link rel="stylesheet" href=“https://fonts.googleapis.com/css?family…”>

  23. …/css?family=Roboto:400

  24. …/css?family=Roboto:400 @font-face { font-family: ‘Roboto’; font-style: normal; font-weight: 400; src:

    local('Roboto'), url(https://font.woff2) format('woff2'); }
  25. None
  26. None
  27. div { font-family: Roboto, sans-serif; }

  28. @font-face { font-family: ‘Roboto’; font-style: normal; font-weight: 400; src: local('Roboto'),

    url(https://font.woff2) format('woff2'); }
  29. div { font-family: Roboto, sans-serif; } Do I HAVE Roboto

    YET?
  30. div { font-family: Roboto, sans-serif; } RENDER

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

  32. div { font-family: Roboto, sans-serif; } RENDER BLOCK Do I

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

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

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

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

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

  38. WHICH LOOKS LIKE THIS

  39. None
  40. None
  41. FOIT BLOCK

  42. FOIT FOUT BLOCK SWAP

  43. AMAZING. now what.

  44. FOIT IS WAAAY WORSE THAN FOUT

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

  46. MINIMIZE FOIT SHAKE IT OFF

  47. MINIMIZE FOIT DOWNLOAD FEWER THINGS

  48. MINIMIZE FOIT DOWNLOAD FEWER THINGS @font-face { font-family: 'Roboto'; font-weight:

    400; src: local('Roboto'), url(https://font.woff2) format(‘woff2'); }
  49. MINIMIZE FOIT DOWNLOAD EVEN FEWER THINGS

  50. 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; }
  51. MINIMIZE FOIT DOWNLOAD EVEN FEWER THINGS EARLIER

  52. MINIMIZE FOIT @font-face { font-family: 'Roboto'; font-weight: 400; src: local('Roboto'),

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

    url(https://font.woff2) format(‘woff2'); } <link rel=“preload" href=“https://font.woff2” as="font" type="font/woff2" crossorigin> DOWNLOAD EVEN FEWER THINGS EARLIER
  54. MINIMIZE FOIT FONT FACE OBSERVER

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

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

    } body { font-family: sans-serif; }
  57. MINIMIZE FOIT FONT FACE OBSERVER var font = new FontFaceObserver('Roboto');

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

    font.load().then(function () { document.body.classList.add(‘fonts-loaded'); });
  59. MINIMIZE FOIT CONTROL THE BLOCK/SWAP PERIOD

  60. MINIMIZE FOIT FONT-DISPLAY: OPTIONAL

  61. MINIMIZE FOIT FONT-DISPLAY: OPTIONAL

  62. MINIMIZE FOIT FONT-DISPLAY: OPTIONAL @font-face { font-family: 'Roboto'; font-weight: 400;

    src: local('Roboto'), url(https://font.woff2) format(‘woff2’); }
  63. 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; }
  64. INVISIBLE BLOCK SWAP FALLBACK OPTIONAL 3s 100ms 0S 100ms

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

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

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

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

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

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

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

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

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

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

    100ms 3S
  75. https://font-display.glitch.me

  76. MINIMIZE FOIT ✅

  77. MINIMIZE FOIT ✅ MINIMIZE FOUT

  78. MINIMIZE FOUT BE LESS JARRING

  79. None
  80. None
  81. https://meowni.ca/font-style-matcher

  82. FUNSIES WITH web fonts BONUS

  83. ICON FONTS

  84. None
  85. None
  86. MAKE YOUR OWN!

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

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

  89. http://fontastic.me

  90. None
  91. COLOUR FONTS?

  92. https://typewithpride.COM

  93. None
  94. VARIABLE FONTS

  95. VARIABLE FONTS BASICALLY SORCERY

  96. None
  97. None
  98. div { font-family: 'AmstelvarAlpha Default'; font-size: 192px; font-variation-settings: 'wght' 98.4113,

    'wdth' 402; }
  99. https://AXIS-PRAXIS.org

  100. https://AXIS-PRAXIS.org

  101. 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; }
  102. https://AXIS-PRAXIS.org

  103. / bram stein - webfoNt handbook / helen holmes -

    type is your right / JAKE ARCHIBALD - minimising-font-downloads / every zach Leatherman BLOG post ever
  104. 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