Channel: DevTips

Category: Education

Tags: font loadingfont performanceweb fontshow to load web fonts

Description: Sponsored by: Coursera.org, thanks! Get the world's best online education experience on subjects such as Data Science, Business, Blockchain, you name it at Coursera! go.thoughtleaders.io/721720181207 After a lot of experimentation I've come across my preferred way of loading web fonts. I have balanced ease of use, i.e. how to implement, with performance. 🗿 MILESTONES ⏯ 01:15 😵 Fixing errors: HREF instead of SRC ⏯ 03:48 Introducing font-display: swap; 🦸‍♀️ ⏯ 08:30 Baseline without web fonts (Wikipedia style) ⏯ 09:24 Late preload with font-display: swap; ⏯ 12:00 PERFORMANCE COMPARISON & DISCUSSION 📊 ⏯ 17:59 My actual recommendation ⭐️ Demo of examples 💅 dt-font-loading-d0mbbgpid.now.sh Repo with the examples 📝 github.com/chhib/dt-font-loading The Font Loading Checklist by Zach Leatherman ☑️ zachleat.com/web/font-checklist The Five Whys of Web Font Loading Performance (video) ▶️ zachleat.com/web/five-whys The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends. 💻 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! ❤️ youtube.com/funfunfunction #webfonts #performance #css