Just jotting some notes on delivering webfonts performantly…
still an incomplete draft.
- identify which fonts you NEED for the first render (A), and which you dont (B)
- you want the network reqs for A to start ASAP. ideally the @font-face req is in a style tag, following CRP guidelines
- you can also preload it with font load events API https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/
- you can use the upcoming
preload
if you know the font URL ahead of time.
- you don't want a @font-face to be in CSS that's included via JS. this is equivalent to JS document.write'ing more JS.
- defer italic/bold and allow font synthesis to tackle those. that's described well on http://www.zachleat.com/web/foft/
http://blog.typekit.com/2015/08/04/new-embed-code-for-asynchronous-font-loading/ http://help.typekit.com/customer/portal/articles/649336-embed-code
my demo using async: https://output.jsbin.com/vumexi/quiet