Adding Adobe Fonts

The process of adding Adobe Fonts is quite similar to the general font adding process. By following these steps, you’ll be able to seamlessly incorporate Adobe Fonts into your site and enhance your typography.

1. Go to Adobe Fonts

Start by visiting Adobe Fonts and searching for the font you want to use on your site. Adobe Fonts offers a wide selection, so take your time to find the perfect match for your design needs.

Adobe FontsAdobe Fonts

2. Add to Web Project

Once you've selected a font, click the </> Add to Web Project button. This will allow you to use the font on your website by linking it to a web project.

3. Create a Web Project

A new popup will appear, prompting you to add the name of your project, name the project and choose the desired font variants (e.g., Regular, Bold, Italic) for this project, then click the "Create" button to generate your web project.

4. Access Your API Token

Now that you've created your web project, head to the top right area of the Adobe Fonts page. Click on your profile icon, and in the dropdown menu, select "API Tokens." This is where you'll find the necessary API token to integrate Adobe Fonts with your site.

5. Copy Your API Token

On the API Tokens page, locate your token on the left side. Copy this token, as you'll need it to connect Adobe Fonts with your site through Kalium.

6. Integrate with Kalium

To finalize the process, navigate to Kalium -> Typography -> Settings in your WordPress dashboard. Paste the API token you copied into the "Adobe Fonts API Token" field. This will link your Adobe Fonts to Kalium, allowing you to use them on your site.

7. Add a New Font

Navigate to the Fonts tab under Kalium -> Typography, then click on the "+ Add Font" button to start adding a new font.

8. Choose the Font Source

Select the font source from the available options, in this case Adobe Fonts, and click "Continue ->".

9. Select Your Font

In the left panel, the fonts you've selected and added to your project in Adobe Fonts will show while in the right you will see the variants you've selected.

10. Apply the Font

Decide where you want the font to be applied, such as "Sitewide," "Headings," or "Paragraphs." By default, the font will be applied sitewide. If you want to use different fonts for different sections, you can customize the settings to apply one font to headings and another to paragraphs, or adjust as needed.

Save Changes

Well done! You’ve successfully added Adobe Fonts to your site. Now, you can start applying these fonts to various elements, ensuring your site’s typography reflects the style you’re aiming for.