Typekit

This article was last updated on the December 21, 2016.

Extensions are X specific plugins available for download for all customers with a validated purchase of X. You can easily download and mange all of your Extensions directly from the WordPress admin area under Addons > Extensions. 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 Extensions submenu item.

TypeKit Menu

From here, you can choose to enable or disable the plugin as needed:

Typekit enable

Disabling the plugin will effectively turn off all output from the plugin (e.g. HTML, CSS, JavaScript, et cetera). This is useful as a quick way to toggle activity if you ever need without having to go through the Plugins menu and worry about activating/deactivating it completely. This way you can work with and manage all of your X specific functionality from one centralized place under the Addons section.

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.

Typekit settings

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:

Typekit ID

Once you’ve clicked on that, you’ll see a popup like this:

Typekit ID located

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.

Saving 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!

Typekit settings saved

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.

Typekit fonts loaded

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:

Typekit font ready

Congrats! Your typekit fonts are now ready to use.

About Items

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.