There are tons of approaches to efficient web font loading but this is the one I like the most.
Load web fonts asynchronously. Avoid big reflows in layout. Load web fonts as fast as possible. Avoid loading web fonts for recurring visitors.
Font loading is crucial for good typography
If you’re not currently using a font loading strategy, using preload with web fonts will reduce the amount of FOIT visitors will see when they visit your site—paid for by sacrificing initial render time.
Web font loading may seem complicated, but it is actually quite simple if you use these font loading patterns. Combine the patterns to create custom font loading behaviour that works in all browsers.
This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice.
Inspired by the recent work that Github and Medium have done to improve their fonts and thus the reading experience on their sites, we at Booking.com got to thinking about our own long-established font choices.