loadCSS

Version B could probably be optimized here by not loading two very similar fonts. You can also try loading the font locally first, to avoid the download if it's installed on the user's system. Finally, unicode-range lets you avoid the download completely if that character isn't included on the page. Not a likely outcome on an English page, but a good practice regardless. Webfonts are tough to optimize, but not impossible. Right now there's solutions of using Javascript to background the font so it's non-blocking (eg. loadCSS[1]), but it's not ideal when trying to keep overhead down. The situation should improve once font-display[2] becomes standardized. For what it's worth though, I find Version B looks much nicer. [1] https://github.com/filamentgroup/loadCSS [2] https://css-tricks.com/font-display-masses/