Performance, sometime
Live demos
Baseline
Baseline without prefetch and preconnect for Google Fonts
System fonts only
Inline CSS:
A:
Self hosted local fonts
with font-display
(
WebPageTest
)
H:
with font-display and 5/5 fonts preloaded
Additional test recommended by Yoav Weiss:
with font-display and 5/5 fonts preloaded (preloads placed after CSS requests to reduce first-render penalty)
(WebPageTest result)
I:
with font-display and 2/5 fonts preloaded
J:
with font-display and 2/5 fonts preloaded, 3/5 fonts sharded
K:
with font-display and 3/5 fonts preloaded, 2/5 fonts sharded
L:
with CSS Font Loading API (preload 2/5, use JS for 5/5)
(or
preload 2/5, use JS for 3/5
) (or
preload 2/5, use JS for 3/5 sharded and preconnect
)
M:
using only a single preloaded 115KB variable font (only for speed testing—this is not Noto Sans or Noto Serif)
(or
without preload
)
B:
Use Google CDN for fonts
(don’t do this, Google URLs are not stable)
Netlify subdomain (sharding-ish)
C:
with preconnect
E (builds on C):
with font-display
G (competes with F):
with font-display and 5/5 fonts preloaded
(don’t do this, separate domain and preload is costly—preconnect cannot save you)
D:
without preconnect
F (competes with G):
with font-display and 5/5 fonts preloaded
(don’t do this, separate domain and preload is costly—preconnect cannot save you)
See also J and K above (partial shard)
Code samples
All demos
Repo for the cross-origin assets (sharding)
css-font-loading.js
: Asynchronously loading web fonts using the CSS Font Loading API