How can I load dynamically typekit fonts?

Question

Is there a way to load typekit fonts dynamically, much like the Google Font API?

That is, how can I declare dynamically on each page the font name in a css link and load just the font(s) that are required for that page, instead of adding fonts into a kit and the loading the whole kit.

Answer 1

I have found a solution, posting it here in case it is useful for someone else:

I will use the Typekit API to dynamically create a new 'kit' (i.e. javascript file) for every different combination that my app requires, instead of including all of them in one big 'kit'.

See: https://typekit.com/docs/api/kits

Thanks anyway for your answers!

Answer 2

You could write a server side script that, depending on the page, will generate a different css file with the font-family rule(s) you wish.
Then you could use @import to bring this rule into your main css file.

Answer 3

TypeKit has recently introduced a way that users may find useful to perform functionality similar to what you are looking for but doing it in a very easy way without having to use the API. They call it Dynamic Subsetting.

As I write this it is only available for East Asian Fonts, however, there is a workaround to use it with other TypeKit fonts. The workaround comes from this site.

1. Add a East Asian Font such as Source Han Sans Japanese. This will automatically convert the kit to a dynamic kit.

2. Select each font and under the Character Set options choose Dynamic Subsetting for each font.

3. Remove the East Asian Font.

4. Publish Kit.

Even if you remove the East Asian Font, the kit will remain a Dynamic Kit.