Channel: DevTips

Category: Education

Tags: performancegoogle web fontsfoitwebfontsfoutweb fontspreloadfont loading performance

Description: 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 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 💅 dt-font-loading-phmrd1aiq.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 helper to get the Google Web Fonts as WOFF2 files ฒ google-webfonts-helper.herokuapp.com/fonts 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