Better font events with the native font loading API
Typekit kits are now using the CSS font loading API, which is available in recent versions of Chrome, Firefox, and Opera. The font loading API provides native functionality for loading and manipulating web fonts. It also provides font events that will tell you when a font loads or fails to load.
Before the introduction of the native API, we detected font loading by inserting test elements in the page. These elements were regularly polled for width to see if the font had loaded. This process is very expensive because it triggers a page wide style reflow each time the elements are checked. Using the native API, we can bypass this process completely, which results in a big performance improvement.
Browsers that do not support the native API fall back to the old behavior. We hope other browser vendors will join Google, Mozilla, and Opera and implement this new API for faster and more reliable font events.
This improvement has been a collaborative open source effort. Hajime Morrita worked hard on adding support for the native API to our open source Web Font Loader library. Because our kit JavaScript is based on the Web Font Loader, adopting the changes was straightforward. Many thanks to Hajime for working on this with us!
If you wish to use the new functionality, please republish your kit(s). You can do this in the kit editor, or on the kit management page. Please let us know at support@typekit.com if you have any questions concerning this change.
8 Responses
Comments are closed.
Thanks Bram, performance is equally important as having the right typeface, hinting, etc. One thing I really miss from Typekit’s early days is seeing the KB size of each font on the typeface page. It was possible to rule out specific typefaces because they were 50 KB vs 22 KB per variant.
This was hidden several years ago and only made visible in the kit editor. It’s pretty annoying having to add all the faces you’re considering into a kit to see the performance impact. I understand there are file size differences between WOFF and TTF packagings of fonts, but Typekit should make that info accessible.
Designers care about performance as much as engineers. It’s a thing.
Couldn’t agree more
I’m with you
Agreed! Please bring this info back Adobe!
Hopefully Adobe will do it.
http://caniuse.com/#feat=font-loading
shame on them.
So, if I republish my kits, do I need to make any changes to the kit embed JS that I copied previously and put on my website head? Or will it just work as it always has when I republish?
You don’t need to make any changes to the embed code, republishing your kit is sufficient.