Typekit fonts How-to - UX Shop - Responsive WooCommerce theme

General

This theme has the functionality to let you use fonts declared in your Typekit account.

This functionality is build in into a separate plugin ( named: Typekit for Redux Framework, by develoved ) which is bundled with the theme and can be installed easily through the required & recommended plugins installer ( Appearance -> Install plugins ).

See Installing required & recommended plugins for more.

Creating your Typekit Kit

In order to use fonts from your Typekit account you have to create a 'kit', add the fonts you wish to that kit, enter the Kit's ID into the theme options and you are then ready to select the fonts in the Styling->Fonts options section.

To create a Kit, check out this link. Once you have created a kit, you have to get the Kit's ID. Launch the Kit editor and click the 'Embed' link near the top right corner: On the modal box that pops up you can see your Kit's ID. Copy it down.

Setting up the Kit in the theme options

Go back to the theme's options. Once the plugin is installed & activated an extra section is added in the theme's options panel:

Enable the Typekit module and enter your Kit's ID into the Typekit Kit ID field and hit the Refresh & show kit fonts button.

If you don't hit the Refresh & show kit fonts button the changes to the font list won't take effect.

If everything works, the fonts configured in your kit should appear right below the button: If you don't see your fonts, make sure that:

You have correctly added your website address to the allowed domains list in the Kit's settings
You have published your kit
You have given it some time to publish, or propagate changes to the typekit servers

Don't forget to save your changes!

Hide page until fonts are loaded

If you are having issues with FOUT (Flash of unstyled text, the text is shown briefly before the font has been downloaded), you can enable this option and reveal the page only after the font has been downloaded.

Using the typekit fonts

After you have set-up the kit in the theme's options and saved your changes, do a page refresh and go to the Styling->Fonts settings section. Open any of the Font selector dropdowns and you should see the Typekit fonts from your Kit!