Amal Raghav

Design. Develop. Destroy.

Get Typekit fonts working with EpicEditor or inside iframe

So I was faced with this issue of getting Typekit to work with EpicEditor, which is probably the best JS based editors I've seen. At last I got it working with some help from @oscargodson, who created the wonderful editor.

The problem

Unlike Google web fonts, Typekit uses a pure JS interface to load the fonts. So you can not add the @import rule into your theme and use the fonts.

The solution

The solution is to execute the JS from inside the iframe. Oscar took his time and gave me a snippet on how to achieve this with EpicEditor. http://jsbin.com/unudux/3/edit

Now all I had to do was to asynchronously load the JS from Typekit in the iframe as explained here http://blog.typekit.com/2011/05/25/loading-typekit-fonts-asynchronously/

The final code was this.

All good after that. Huge thanks to Oscar for helping out :)


Copyright © 2013 Amal Raghav