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

Fontastic web performance

Monica Dinculescu
October 18, 2017
Programming
18
2.8k

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

See All by Monica Dinculescu
How to train your dragon (web standard)
notwaldorf
70
4.7k
What you see is what you deserve: simple visual tools for all!
notwaldorf
5
650
Billions served, lessons learned: a Polymer story
notwaldorf
3
950
An app in 3 days [with an intro to PWA/Polymer]
notwaldorf
2
1.1k
An app in 3 days or: how I learned to stop worrying and love the Polymer toolbox
notwaldorf
3
740
How I didn't fix 📧Ⓜ️💣🚽ℹ️ in Chrome
notwaldorf
2
440
input, i ♥️ you, but you're bringing me down
notwaldorf
8
1.9k
Building web components: lessons, I have them.
notwaldorf
5
1.4k
🎉🐱✨or: How I didn’t fix emoji in Chrome
notwaldorf
1
1k

Other Decks in Programming

See All in Programming
Why Tomcat Matters for Jakarta EE
ivargrimstad
0
220
Adopting Jetpack Compose Safely (Droidcon Lisbon 2023)
stewemetal
0
150
拡張機能でええんちゃう？
maepon
1
360
4 Patterns to Jumpstart your Event-Driven Architecture Journey @ Current 2023, San Jose California
hpgrahsl
0
260
家庭用自律移動ロボット「カチャカ」の開発者API公開と ROS 2インターフェイス実装
youtalk
0
140
ECSのCI/CD改善と標準化の取り組み / JAWS FESTA 2023 in Kyushu
cohalz
7
1.6k
TokyoR109.pdf
kilometer
1
220
Node-RED in Industrial IoT
kazuhitoyokoi
0
650
RubyVM を PHP で実装する 〜Hello World を出力するまで〜
memory1994
PRO
1
3.6k
Monorepo for Cloudflare Workers
peaceiris
0
150
ノーコードE2Eテストで実現する高速開発
nozomiito
0
260
Ebitengine, community, and my dream
eihigh
0
990

Featured

See All Featured
Making the Leap to Tech Lead
cromwellryan
119
8.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
271
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
342
19k
Designing with Data
zakiwarfel
93
4.5k
A better future with KSS
kneath
230
16k
Faster Mobile Websites
deanohume
296
29k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
351
28k
Rebuilding a faster, lazier Slack
samanthasiow
71
7.9k
The Invisible Customer
myddelton
113
12k
For a Future-Friendly Web
brad_frost
168
8.3k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
What's new in Ruby 2.0
geeforr
336
30k

Transcript

  1. WEB PERFORMANCE
    FONTASTIC

    View Slide

  2. @notwaldorf

    View Slide

  3. of websites
    use web fonts
    68%

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide


  8. View Slide


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


  10. @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 Slide

  11. THE MITT ROMNEY
    WEB FONT PROBLEM
    /ZACH LEATHERMAN
    “

    View Slide

  12. View Slide

  13. View Slide

  14. FOUT
    I

    View Slide

  15. FOUT
    FOUT
    I

    View Slide

  16. THE BROWSER HAS
    A TON OF OPINIONS

    View Slide

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

    View Slide

  18. index.html

    View Slide

  19. index.html

    View Slide

  20. View Slide

  21. View Slide


  22. View Slide

  23. …/css?family=Roboto:400

    View Slide

  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');
    }

    View Slide

  25. View Slide

  26. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    RENDER

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    SWAP

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. WHICH LOOKS LIKE THIS

    View Slide

  39. View Slide

  40. View Slide

  41. FOIT
    BLOCK

    View Slide

  42. FOIT FOUT
    BLOCK SWAP

    View Slide

  43. AMAZING.
    now what.

    View Slide

  44. FOIT IS
    WAAAY
    WORSE THAN FOUT

    View Slide

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

    View Slide

  46. MINIMIZE FOIT
    SHAKE IT OFF

    View Slide

  47. MINIMIZE FOIT
    DOWNLOAD FEWER THINGS

    View Slide

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

    View Slide

  49. MINIMIZE FOIT
    DOWNLOAD EVEN FEWER THINGS

    View Slide

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

    View Slide

  51. MINIMIZE FOIT
    DOWNLOAD EVEN FEWER THINGS EARLIER

    View Slide

  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

    View Slide

  53. 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 Slide

  54. MINIMIZE FOIT
    FONT FACE OBSERVER

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  59. MINIMIZE FOIT
    CONTROL THE BLOCK/SWAP PERIOD

    View Slide

  60. MINIMIZE FOIT
    FONT-DISPLAY: OPTIONAL

    View Slide

  61. MINIMIZE FOIT
    FONT-DISPLAY: OPTIONAL

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  76. MINIMIZE FOIT ✅

    View Slide

  77. MINIMIZE FOIT ✅
    MINIMIZE FOUT

    View Slide

  78. MINIMIZE FOUT
    BE LESS JARRING

    View Slide

  79. View Slide

  80. View Slide

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

    View Slide

  82. FUNSIES WITH
    web fonts
    BONUS

    View Slide

  83. ICON FONTS

    View Slide

  84. View Slide

  85. View Slide

  86. MAKE YOUR OWN!

    View Slide

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

    View Slide

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

    View Slide

  89. http://fontastic.me

    View Slide

  90. View Slide

  91. COLOUR FONTS?

    View Slide

  92. https://typewithpride.COM

    View Slide

  93. View Slide

  94. VARIABLE FONTS

    View Slide

  95. VARIABLE FONTS
    BASICALLY SORCERY

    View Slide

  96. View Slide

  97. View Slide

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

    View Slide

  99. https://AXIS-PRAXIS.org

    View Slide

  100. https://AXIS-PRAXIS.org

    View Slide

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

    View Slide

  102. https://AXIS-PRAXIS.org

    View Slide

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

    View Slide

  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

    View Slide