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.

Now all I had to do was to asynchronously load the JS from Typekit in the iframe as explained here

The final code was this.

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

Copyright © 2013 Amal Raghav