TL;DR — if you need a web font, use WOFF2 fonts if available, then fall back to WOFF, then, finally, use whatever other formats are available.
You can specify multiple values for the
src property, so this syntax should work:
Fonts are a heck of a lot of fun. Lately (thinking 2015, it is currently mid-2016) there have been a handful of reasonable arguments in favor of using system fonts instead of web fonts.
I love system fonts and classic/core web fonts and I agree with the reasons behind using them instead of custom web fonts. They’ll always be faster than custom web fonts for all of the obvious reasons.
But what about when you need (or want) something nicer than a system font and you want it to be fast? Try WOFF2.
WOFF2 is a web standard optimized font-packaging format that offers fairly large compression gains over other formats.
If you’re reading this page with my Playfair stylesheet (and if you aren’t, but want to, navigate here or use the sidebar), there’s a fair chance the headings are using the WOFF2 format.
For ‘Playfair Regular’, WOFF2 offers a 10X optimization over TTF and a 3.5x optimization over WOFF.
WOFF2 isn’t supported everywhere, but web fonts allow us to specify multiple values for fonts (see CSS in intro). The first value is treated by the browser as the most desirable option, the final value is the ultimate fallback.
Avoid sending WOFF2 files over the wire with e.g. gzip — they are already pre-compressed.
local('NameOfLocalFont')if there might be a locally-available font — avoid the network request altogether!