Integrating Adobe fonts (formerly Typekit)

Updated on January 9, 2019

Adobe Fonts is a subscription font service that brings thousands of fonts from foundry partners into one library for quick browsing, and easy use on the web or on your desktop, as well as endless typographic inspiration. Click here for more information about this service.

The process of integrating Adobe fonts into Jupiter is easy and requires two main steps; configuring the Adobe Fonts and adding the Adobe Project D into the theme.


Configuring the Adobe Fonts

1Once you’ve created your account, choose some fonts.

You can toggle between the default & Japanese font collections from the selector at the top of the page. Filter by Classification (e.g., serif or sans serif), Properties (e.g., x-height, width, or weight), or Language. You can also choose between two recommended categories: headings and paragraphs.

2When you find a font you like, click on the </> button to add the family to a web project.

3In the Add fonts to a Web Project window, you’ll name your web project and decide which fonts should be included.

Click on the menu and choose “Create a new project” Name your web project Use the checkboxes to select the font weights and styles you want to include. Create the project.

4Next, you’ll be given the embed code to load the fonts into your website.

Click Done to close the web project window and continue browsing.

5Go to My Adobe Fonts > Web Projects tab.

The web project and all the fonts you’ve added to it will be listed there. Click the Edit Project button to change which font weights and styles are included, remove a web font family from the project entirely, or change the character set, which specifies the project’s language support.

6Copy the Project ID.

Integrating the Adobe Fonts

The next step is to add the Adobe Fonts into Jupiter.

1From the WordPress left menu, go to Jupiter > Theme Options > Global Settings > API Integrations.

2Scroll down to Typekit Kit ID input field and paste your Project ID obtained in the first section of this article. After that, click on the Save Settings button.

3From the WordPress left menu, go to Jupiter > Theme Options > Typography.

4Click on Add a new font.

5Select TypeKit and add the font family name from drop down menu that you have added to your list inside the Adobe Fonts website.

6Click on the save font icon (green button).
7Then choose elements for which you want to use this font family.

8Click on the Save Settings button.
Did this answer your question?