Improvements to the advanced embed code

We recently launched some changes to our recommended embed code. An important part of those changes was making an advanced embed code that loads fonts asynchronously available from the Kit Editor. This method has been very useful for developers who want additional control and don’t mind writing some extra CSS to hide the flash of unstyled text (FOUT).

The asynchronous embed code was developed over a year ago and published both on the blog and on GitHub. Many developers put it to use right away, but officially adding it to the Kit Editor has expanded that use and resulted in additional feedback. In particular, this has helped us to uncover two issues with the original asynchronous embed code that have now been addressed:

  • We fixed an issue in IE9 that caused the inactive font event to trigger briefly before the fonts loaded, causing an extra FOUT.
  • We fixed an issue where whitespace between existing classnames on the element could be removed unintentionally.

Both of these improvements are now reflected in the advanced embed code in the Kit Editor. To take advantage of them, simply visit the Kit Editor, click on “Embed Code” and “Show advanced,” then copy the updated embed code and paste it into your sites.

Since the embed code is the only part of a Typekit integration that can’t be updated with the push of a button, we try not to announce updates frequently. To that end, we’ve waited to announce these updates to see if any additional feedback was forthcoming. At this time, we think we’ve captured most of those concerns and an update is warranted. As always, if you have any questions, drop a line to support@typekit.com and we’ll get back to you right away.