Скачать или смотреть 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