This demonstrates the use of the incremental font transfer (IFT) to load font data for display of a variety of scripts. IFT works by using patches to extend a font to cover more codepoints and/or axes as they are encountered in rendered text. This allows loading of only the parts of a font that are actually needed. This demo is using a fully static (ie. no dynamic backend) version of IFT. IFT is currently in development with the w3c webfonts working group and an early draft of the specification implemented by this demo can be found here.

IFT is useful because fonts can be very large. For example, a CJK font can be tens of thousands of glyphs and multiple megabytes. Incremental font transfer seeks to deliver only the data a website actually uses and thus dramatically reduce the performance impact of web fonts. All languages are expected to benefit. See the IFT Evaluation Report for more information on the justification for and expected performance impact of IFT.

For comparison purposes fonts are also loaded in parallel using css unicode-range which splits each font into multiple disjoint subsets. This is the approach currently utilized by Google Fonts to optimize load sizes.

Instructions:

• Disable caching (via dev console) or force refresh the page (ctrl+shift+r or cmd+shift+r) before starting. If caching is enabled then fonts may be served from the cache which will make the bytes transferred counters incorrect.
• Next/Previous will switch between text samples. Switching to a new sample will use IFT to load any additional font data as needed.
• If "Compare to unicode range" is selected then fonts will be loaded via the Google Fonts API (using unicode range) in parallel to the incremental font transfer.
• If unicode range loading is enabled you can switch the displayed text sample between the two methods using the "Show unicode range" button.