DevTips | Font Loading Performance π 6 Experiments with FOUT & FOIT @OfficialDevTips | Uploaded November 2018 | Updated October 2024, 6 minutes ago.
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.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
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.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
![Lets Go To A SeanWes Meetup [ DevTips Vlog 013 ]](https://i.ytimg.com/vi/xP5gFgjmLXE/hqdefault.jpg "Lets Go To A SeanWes Meetup [ DevTips Vlog 013 ]
I share some good news before we go meet new friends at a SeanWes meetup in San Francisco!
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow")
