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
Note: If you haven’t already, create an
Adobe account.
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.
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”).
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.
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.
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.
Note: More details of Adobe Fonts usage can be found in their
documentation.
