Integrating Adobe fonts (formerly Typekit)

Last Updated on

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.

In this article


Configuring the Adobe Fonts

x
Note: If you haven’t already, create an Adobe account.
1
Once 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.

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

3
In 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.

4
Next, 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.

x
Note: It is possible to add multiple fonts in a single project.To add more fonts to your project, click the </> button on another font family, then choose your project name from the menu (instead of “Create a new project”).

5
Go 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.

6
Copy the Project ID.

Integrating the Adobe Fonts

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

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

2
Scroll 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.

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

4
Click on Add a new font.

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

x
Note: The name of the font should be lowercase, with no spaces, and must have hyphens (-) as a separator of the words in the font name.
6
Click on the save font icon (green button).
7
Then choose elements for which you want to use this font family.

8
Click on the Save Settings button.
x
Note: More details of Adobe Fonts usage can be found in their documentation.
Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket