What are Web Fonts? (Best Practices for 2021)
Typography accounts for 95% of web design. Your font choice can be critical for branding, readability, and performance. Recommendations for using web fonts have changed as browsers adopted new standards. Now in 2021, this video shares the best practices for using web fonts for high-performance sites.
0:00 – Introduction
0:19 – Web Safe Fonts
1:08 – System Font Stack
1:42 – Why Web Fonts?
2:08 – Self-Hosting
3:17 – Caching
3:39 – Font Display
4:24 – Flash of Unstyled Text (FOUT)
4:37 – Flash of Invisible Text (FOUT)
5:13 — Pre-loading
7:01 — Variable Fonts & Subsetting
8:28 – Conclusion
Links
–––––
1: https://ia.net/topics/the-web-is-all-about-typography-period
2: https://thehistoryoftheweb.com/web-fonts/
3: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts
4: https://systemfontstack.com/
5: https://almanac.httparchive.org/en/2020/fonts
6: https://developers.google.com/web/updates/2018/08/web-performance-made-easy
7: https://developers.google.com/web/updates/2020/10/http-cache-partitioning
8: https://csswizardry.com/2020/05/the-fastest-google-fonts/
9: https://web.dev/preload-critical-assets/
10: https://web.dev/variable-fonts/
11: https://github.com/leerob/leerob.io
12: https://www.youtube.com/watch?t=176&v=Z6wjUOSh9Tk&feature=youtu.be
–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob
Course: https://react2025.com/
Видео What are Web Fonts? (Best Practices for 2021) канала Lee Robinson
0:00 – Introduction
0:19 – Web Safe Fonts
1:08 – System Font Stack
1:42 – Why Web Fonts?
2:08 – Self-Hosting
3:17 – Caching
3:39 – Font Display
4:24 – Flash of Unstyled Text (FOUT)
4:37 – Flash of Invisible Text (FOUT)
5:13 — Pre-loading
7:01 — Variable Fonts & Subsetting
8:28 – Conclusion
Links
–––––
1: https://ia.net/topics/the-web-is-all-about-typography-period
2: https://thehistoryoftheweb.com/web-fonts/
3: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts
4: https://systemfontstack.com/
5: https://almanac.httparchive.org/en/2020/fonts
6: https://developers.google.com/web/updates/2018/08/web-performance-made-easy
7: https://developers.google.com/web/updates/2020/10/http-cache-partitioning
8: https://csswizardry.com/2020/05/the-fastest-google-fonts/
9: https://web.dev/preload-critical-assets/
10: https://web.dev/variable-fonts/
11: https://github.com/leerob/leerob.io
12: https://www.youtube.com/watch?t=176&v=Z6wjUOSh9Tk&feature=youtu.be
–––––
Blog: https://leerob.io/
Twitter: https://twitter.com/leeerob
GitHub: https://github.com/leerob
Course: https://react2025.com/
Видео What are Web Fonts? (Best Practices for 2021) канала Lee Robinson
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![How to host your own fonts made simple](https://i.ytimg.com/vi/KzqQXDbDvus/default.jpg)
![](https://i.ytimg.com/vi/ZWdX3TLIamc/default.jpg)
![Web Development In 2021 - A Practical Guide](https://i.ytimg.com/vi/VfGW0Qiy2I0/default.jpg)
![When to Use Each Font Type (and When Not)!](https://i.ytimg.com/vi/RJ4k6FI_LYQ/default.jpg)
![How I Designed a Free Music Font for 5 Million Musicians (MuseScore 3.6)](https://i.ytimg.com/vi/XGo4PJd1lng/default.jpg)
![What Really Happened at the Oroville Dam Spillway?](https://i.ytimg.com/vi/jxNM4DGBRMU/default.jpg)
![On-Page SEO Checklist for 2021 (Ultimate Guide)](https://i.ytimg.com/vi/imsyg1wRa_Y/default.jpg)
![Fastest Way to Deploy a Database (10 Seconds!?)](https://i.ytimg.com/vi/0zmYHn82cY8/default.jpg)
![Can Nuclear Propulsion Take Us to Mars?](https://i.ytimg.com/vi/MMLgJlJX0Rk/default.jpg)
![Pricing Design Work & Creativity](https://i.ytimg.com/vi/RKXZ7t_RiOE/default.jpg)
![Beginner React.js Coding Interview (ft. Clément Mihailescu)](https://i.ytimg.com/vi/gnkrDse9QKc/default.jpg)
![Top 10 performance pitfalls - HTTP 203](https://i.ytimg.com/vi/Lh9q3h2khlc/default.jpg)
![How Carbon Nanotubes Will Change the World](https://i.ytimg.com/vi/SIif11QOsRI/default.jpg)
![6 simple typography tips to more professional looking sites](https://i.ytimg.com/vi/6ardZEhjvV0/default.jpg)
![What are Variable Fonts?](https://i.ytimg.com/vi/OA20XUTENOE/default.jpg)
![Host Google Fonts Locally With The OMGF WordPress Plugin - FREE](https://i.ytimg.com/vi/RuavviiAyxA/default.jpg)
![I Challenged The CSS King To A CSS Battle](https://i.ytimg.com/vi/-QgJgZCJvo4/default.jpg)
![The Future of Web Fonts looks Awesome - Variable Font Tutorial](https://i.ytimg.com/vi/ZXx_U7SsZeg/default.jpg)
![How To Choose Fonts](https://i.ytimg.com/vi/obZX8oIjia4/default.jpg)
![Architecture Axonometric House with Sketchup and Photoshop](https://i.ytimg.com/vi/wAI9UUBT-zk/default.jpg)