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. <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; }
  2. <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; }
  3. MINIMIZE FOIT DOWNLOAD FEWER THINGS @font-face { font-family: 'Roboto'; font-weight:

    400; src: local('Roboto'), url(https://font.woff2) format(‘woff2'); }
  4. 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; }
  5. MINIMIZE FOIT @font-face { font-family: 'Roboto'; font-weight: 400; src: local('Roboto'),

    url(https://font.woff2) format(‘woff2'); } DOWNLOAD EVEN FEWER THINGS EARLIER
  6. 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
  7. MINIMIZE FOIT FONT FACE OBSERVER var font = new FontFaceObserver('Roboto');

    font.load().then(function () { document.body.classList.add(‘fonts-loaded'); });
  8. MINIMIZE FOIT FONT-DISPLAY: OPTIONAL @font-face { font-family: 'Roboto'; font-weight: 400;

    src: local('Roboto'), url(https://font.woff2) format(‘woff2’); }
  9. 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; }
  10. 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; }
  11. / bram stein - webfoNt handbook / helen holmes -

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