webfont performance notes

webfont-performance-notes.md

Just jotting some notes on delivering webfonts performantly…

still an incomplete draft.

Any critical fonts must be requested asap.

Critical fonts are neccessary for the above-the-fold content to be useful. Identify which of the fonts you NEED for the first render, as they get very different treatment vs the others.

You want the network reqs for your critical fonts to start ASAP. ideally the @font-face req is in a style tag, following CRP guidelines

get the network request going

• where there's support for font load events API, you can kick it off there: new FontFace("FontA", "url("+url+")", {}).load();
• you can use <link rel=preload> (avail in Chrome 50) if you know the font URL
• You can also use <link rel=preconnect> (in chrome, opera & firefox to get the connection warmed up.

Never be dependent on an external script for any font work.

• 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 italics, bold, ayptical glyphs

• Defer italic/bold and allow font synthesis to tackle those. that's described well on http://www.zachleat.com/web/foft/
  • https://www.igvita.com/2014/09/16/optimizing-webfont-selection-and-synthesis/

Recommended resources on font loading.

(Basically: If it doesn't have the names Zach, Ilya or Bram attached, raise an eyebrow :)

• jan 2016: http://www.zachleat.com/web/critical-webfonts/
• sept 2015: https://speakerdeck.com/bramstein/web-fonts-performance?slide=115 sessionstorage for fontsloaded
• aug 2015: http://www.bramstein.com/writing/preload-hints-for-web-fonts.html
• ~2014: Making web fonts fast(er) - Google Slides Lots of technique in here, incl unicode range, woff2, cache control, inlining, etc.
• nov 2015: https://css-tricks.com/loading-web-fonts-with-the-web-font-loader/
• feb 2015: https://www.filamentgroup.com/lab/font-events.html for dealing with FOIT. use a cookie to opt into the cached webfont immediately.
• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=en

for those on typekit, use the async kit.

If you're using typekit, then this is a must.

• 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.

Re "get the network request going", in some browsers, you can also use the Link header, which Google Fonts uses right now:

$ curl -A "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29V) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.95 Mobile Safari/537.36" -s -D - -o /dev/null "https://fonts.googleapis.com/css?family=Source+Code+Pro" | grep Link
Link: <https://fonts.gstatic.com>; rel=preconnect; crossorigin

(In this case the response is text/css, so a header is the only option.)

The AMP boilerplate also includes CSS to hide all content, which is then unhidden by JS when fonts have been given some time to load. (With CSS animation fallback to expose content at 8s, if the JS didn't load or errored out.)