Font Loading Performance 📉 6 Experiments with FOUT & FOIT
Sponsored by: .TECH Domains, thanks! They recently had an awesome Cyber Monday sale but if you missed out use limited time coupon code DEVTIPS at https://go.tech/DevTips for up to 90% OFF for a limited time! Valid only on 1 & 5 Year Domains!
Experimenting with different ways of loading fonts to get the best performance without Flash of Unstyled Text (FOUT) or Flash of Invisible Text (FOIT) on poor mobile connections
🗿 MILESTONES
⏯ 09:26 web font loader sync
⏯ 11:47 web font loader async
⏯ 15:00 self-hosted fonts
⏯ 18:36 self-hosted fonts with preload
⏯ 24:00 own font loader
⏯ 28:30 own font loader with preload
⏯ 31:00 FONT LOAD TIME EVALUATION!!!
⏯ 36:29 WHAT DID WE LURN!?
Demo of examples
💅 https://dt-font-loading-phmrd1aiq.now...
Repo with the examples
📝 https://github.com/chhib/dt-font-loading
The Font Loading Checklist by Zach Leatherman
☑️ https://www.zachleat.com/web/font-che...
The Five Whys of Web Font Loading Performance (video)
▶️ https://www.zachleat.com/web/five-whys/
The helper to get the Google Web Fonts as WOFF2 files
ฒ https://google-webfonts-helper.heroku...
The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.
💻 https://code.visualstudio.com/
DevTips is a weekly show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗. Exploring code together and learning programming along the way - yay!
DevTips has a sister channel called Fun Fun Function, check it out!
❤️ / funfunfunction
#webfonts #performance #css