Async typekit using jQuery and CoffeeScript

Using TypeKit? Using CoffeeScript? Want to load the typekit library asynchronously using jQuery?

First things first. Let’s make sure you have everything set up before we get started:

typekit account (or Adobe CC)
Install CoffeeScript
Include jQuery

Create a New Class

I am going to create a new class to store the functions necessary for my web site. Within this class we will create a function called initTypeKit() that will initialize TypeKit on our web site.

$ ->
	class Brianflove

		@_initialized = null

		constructor: () ->
			if @_initialized is not null
				throw 'Do not instantiate this class on your own'
			@_initialized = true
	brianflove = new Brianflove

I have created a new class called Brianflove, which has a constructor function that will be called when we instantiate the class. I am also checking that the class is not instantiated multiple times (it’s a singleton class for our demonstration). Lastly, I am creating the new instance of the class into a variable named brianflove.

Also, it’s good to note that my class is within the leading $ function for jQuery so the code will execute when the DOM is ready. This is pretty standard practice when using jQuery and CoffeeScript.

Create the `initTypekit()` method

The next step is to create the initTypekit() method within our class that will contain the code to initialize typekit on our web site. Within this method we are going to have an object of configuration parameters. This config parameters will be passed to the Typekit.load() function. These config parameters are detailed on the typekit help page for using their embed code. I am going to be using jQuery to also fade in where my font is located. This is to avoid FOUT (flash of unstyled text).

initTypeKit: () ->
	config =
		kitId: 'your-id-goes-here'
		scriptTimeout: 3000
		active: ->
			$('.container h1, .container .lead').each ->
				$(@).fadeIn 800

The config object contains the following keys:

kitId: your account’s ID
scriptTimeout: the number of milliseconds before we bail on loading the typeface from typekit
active: a callback function that is executed when the webfont has been successfully loaded.

Within my active function callback, I am simply using jQuery’s fadeIn() function to fade in each of the elements on my page that use the typeface that I am loading in from typekit. You can remove this or customize it to your own needs.

Next we need to add the wf-loading class to the html element and create a timeout in case the font loading fails.

$('html').addClass 'wf-loading'
t = setTimeout ->
	$('html').removeClass 'wf-loading'
	$('html').addClass 'wf-inactive'
, config.scriptTimeout

Lastly, we will use the .ajax() method in jQuery to asynchronously load in the typekit source code. In the event that the script is loaded successfully, we will clear the timeout that we previously set, and we will call the load() method on the Typekit class, passing in the config object we created previously.

$.ajax
	url: '//use.typekit.net/' + config.kitId + '.js'
	dataType: 'script',
	cache: true,
	success: ->
		clearTimeout t
		try
			Typekit.load config
		catch

The last thing we need to do is to call this new initTypekit() method after we instantiate our class. Here is the complete source code for loading typekit using jQuery, written in CoffeeScript. Enjoy!

$ ->
	class Brianflove

		@_initialized = null

		constructor: () ->
			if @_initialized is not null
				throw 'Do not instantiate this class on your own'
			@_initialized = true

		initTypeKit: () ->
			config =
				kitId: 'your-id-goes-here'
				scriptTimeout: 3000
				active: ->
					$('.container h1, .container .lead').each ->
						$(@).fadeIn 800
			$('html').addClass 'wf-loading'
			t = setTimeout ->
				$('html').removeClass 'wf-loading'
				$('html').addClass 'wf-inactive'
			, config.scriptTimeout
			$.ajax
				url: '//use.typekit.net/' + config.kitId + '.js'
				dataType: 'script',
				cache: true,
				success: ->
					clearTimeout t
					try
						Typekit.load config
					catch
	brianflove = new Brianflove
	brianflove.initTypeKit()

You can also view the Gist of using CoffeeScript and jQuery to load typekit asynchronously.

Create a New Class

Create the initTypekit() method

Create the `initTypekit()` method