⚡️
1s
2s
3s
4s
GIMME YOUR
MONEY
punk!
JEREMIAS MENICHELLI
@jeremenichelli
FRIENDS
Season 9 Episode 15
- They help building identity
- Cross-browsing and system consistency
- Less limited web design
- Other alternatives aren't accessible or SEO friendly
WHY WE LOVE WEB FONTS
USERS
WANT/NEED
THE CONTENT
WHAT I WANT
SOLUTION
- Async load font stylesheet
- Observe fonts
- Toggle classes on document
- Use preload and preconnect to minimize the switch
- Use glyphhanger from Filament Group to create smaller subsets
- Use .woff2 for better font file compression
MOAR OPTIMIZATIONS
- All web fonts articles by Zach Leatherman
- Web fonts, boy, I don't know by Monica Dinculescu
- Controlling Font Performance with font-display by Rob Dodson
- How we load web fonts progressively by Filament Group
- Font loading strategy for static generated sites and Font loading strategy for single page applications in my blog
Articles
Tweet extracted from BuzzFeedJS parody account
Photos from Unsplash by Joel Fulgencio and Pau Casals