⚡️

1s

2s

3s

4s

5s

END OF THE UNIVERSE

GIMME YOUR
MONEY
punk!

JEREMIAS MENICHELLI

jeremenichelli.io

@jeremenichelli

FRIENDS

Season 9 Episode 15

Gimme me your money, punk!
  • Deeply in love with the web
  • Started with responsive sites, internalization and accessibility
  • Big scale applications, tooling and testing
  • Developing and leading rich animated web experiences
  • Now... design systems!

a little bit about Me

I NEED TO GOOGLE HOW FLEXBOX WORKS EVERY SINGLE TIME

  • Less limited web design
  • They help building identity
  • Cross-browsing and system consistency
  • Other alternatives aren't accessible or SEO friendly

WHY WE LOVE WEB FONTS

USING WEB FONTS
IS A FAIR AND

VALID CHOICE

USERS
WANT/NEED

THE CONTENT

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link
    href="https://fonts.googleapis.com/css?family=Lora|Oswald:700"
    rel="stylesheet"> 
  <title>Gimme your content, punk!</title>
</head>
<body>
    ...
</body>
</html>
body {
  font-family: 'Lora', Georgia, Times New Roman, serif;
  font-weight: 400;
}

h1, h2 {
  font-family: 'Oswald', Helvetica, Arial, sans-serif;
  font-weight: 700;
}
  • CSS blocks document rendering
  • Family font declaration blocks text rendering

ISSUES IN THIS APPROACH

FOIT

Flash of Invisible Text

FOUT

Flash of Unstyled Text

  • Default to system fonts
  • Async load stylesheet with font face declaration
  • Observe fonts
  • Switch to web fonts when ready

SOLUTION

import store from 'store-css' // by me, also possible with loadCSS by Filament group
import FontFaceObserver from 'fontfaceobserver' // by Bram Stein

// async load stylesheet with font declaration
store.css(
  'https://fonts.googleapis.com/css?family=Open+Sans|Oswald:700',
  { crossOrigin: true }
)

// observe fonts
const bodyFamily = new FontFaceObserver('Lora').load()
const headingFamily = new FontFaceObserver('Oswald', { weight: 700 }).load()

// switch to web fonts when ready
bodyFamily.then(() => document.documentElement.classList.add('lora-ready'))
headingFamily.then(() => document.documentElement.classList.add('oswald-ready'))
body {
  font-family: Georgia, Times New Roman, serif;
  font-weight: 400;
}

.lora-ready body {
  font-family: 'Lora';
}

h1, h2 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.oswald-ready h1, .oswald-ready h2 {
  font-family: 'Oswald';
}

font-display

@font-face {
  font-family: YourWebFont;
  src: url(/path/to/fonts/your-web-font.woff22) format('woff2'),
       url(/path/to/fonts/your-web-font.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
font-display-late-swap

BROWSER SUPPORT

Articles

BLOG POSTS BY ME

Tweet extracted from BuzzFeedJS parody account
Photos from
Unsplash by Joel Fulgencio and Pau Casals

THANKS