This article was last updated on the July 19, 2017.
Extensions are X and Pro specific plugins available for download for all customers with a validated purchase of X and Pro. You can easily download and manage all of your Extensions directly from the WordPress admin area under X or Pro depending on the theme installed. This article covers documentation for the TypeKit Extension and goes into detail on certain features where needed.
Enabling the Extension
After installing and activating TypeKit, you will find its settings page underneath the Addons menu beneath the settings submenu item.
From here, you can choose to enable or disable the plugin as needed:
Selecting the enable checkbox will bring up the Settings meta box below. This is where you will adjust any options for the plugin and input your data as needed.
Getting your Typekit ID
If you don't already have a Typekit account, you'll need to sign up for a Typekit account over at Adobes site here. You can also read Adobes official Typekit documentation here.
Once you've created your typekit account and have selected the fonts you wish to use, go ahead and click on "embed code" in your kit:
Once you've clicked on that, you'll see a popup like this:
In that popup will be the embed code and the Typekit ID. You want the Typekit ID, so copy that and then go back to your Typekit extension settings in your wp-admin and paste that into the relevant settings.
Once you are satisfied with the configuration of your plugin, go over to the Save meta box and click the Update button. After your settings have successfully saved, you will see an update message at the top of the page confirming that everything has been set and you're good to go!
Once you've saved the Typekit settings, you'll see another settings meta box with the fonts that are loaded based on the kit ID you just entered.
Now if we load up the WordPress customizer and head to the Typography section, you'll see that the Typekit font is now available for us to use:
Congrats! Your typekit fonts are now ready to use.
Certain controls or pieces of functionality might have an informational element added for them under the About meta box. To access this information, simply hover over the item you'd like to read more about and click on it to toggle it open or closed. These are typically only added if some additional information is needed for clarity that cannot be placed underneath the setting title to the left of the input in the Settings meta box.