HDTutorial
EN
How to Load Web Fonts in 2019 ????

Playback starts YouTube’s embedded player (privacy-enhanced mode).

How to Load Web Fonts in 2019 ????

20,525 views October 26, 2019 21:05

Watch on YouTube
ChannelDevTips

Description from the creator

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

About this tutorial

DevTips published this 21:05 video tutorial on October 26, 2019. It has been watched 20,525 times on YouTube.

Channel
DevTips
Category
Education
Duration
21:05
Published
October 26, 2019
Views
20,525
Likes
416

Tags

Share

Further reading

  • How to activate free desktop and web fonts from Adobe Fonts helpx.adobe.com

    You can access the activated fonts in the Active fonts panel inside Creative Cloud desktop app and in the font list in your desktop apps. Some desktop applications, like Microsoft Word, may require a restart after a new…

  • Download and install custom fonts to use with Office - Office ... support.microsoft.com

    Locate custom fonts on the Web . In addition to acquiring and using fonts installed with other applications, you can download fonts from the Internet. Some fonts on the Internet are sold commercially, some are distribut…

  • How to Install Fonts in Windows 10 | Digital Trends digitaltrends.com

    Sometimes, the default fonts supplied in the latest version of Windows 10 just don’t cut it. Times New Roman and Arial fonts are timeless, but maybe you want something with a little more pizzazz.

This tutorial in other languages