High performance
web fonts

70% of websites

use web fonts

... and are taking a performance hit

A real world example

A real world example

Why so slow?

Why so slow?

Why so slow?
Delay

Why so slow?
DNS, Connect, TLS

Why so slow?
latency

Why so slow?
Google fonts

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src:
    local('Roboto'),
    local('Roboto-Regular'),
    url('https://fonts.gstatic.com/roboto/filename.ttf') format('truetype');
}

Making it fast
self host + http2

<link rel="stylesheet" href="/fonts/MyFonts.css">

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src:
    local('Roboto'),
    local('Roboto-Regular'),
    url('/fonts/Roboto.woff2') format('woff2'),

    url('/fonts/Roboto.woff') format('woff');
}

Making it fast
self host + http2

Making it fast
preload fonts

<link rel="preload" href="/fonts/Roboto.woff2" as="font" type="font/woff2"
      crossorigin="anonymous">

<style>
    @font-face {
      ...
      src: url('/fonts/Roboto.woff2') format('truetype');
    }
</style>
<script>
  try {
    for (font of document.fonts) {
      font.family.includes('Roboto')) && font.load();
    }
  } catch (e) {}
</script>

Making it fast
preload fonts

Making it fast
subset the fonts

Limbo time
font-display

Credit: Monica Dinculescu - Font-display playground

fallback text
font style matcher

Credit: Monica Dinculescu - Font style matcher

automation
project subfont

DEMO

A REAL WORLD EXAMPLE
Before and after

Comparison - Video

Questions?

Thanks!

Subfont: https://www.npmjs.com/package/subfont

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

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

http://slides.com/munter/high-performance-web-fonts​