# 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](https://fonts.adobe.com) 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.

{% embed url="<https://fonts.adobe.com/>" %}

### 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.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F1JmIxS84zLpeFnTaait5%2Ftypography-adobe-fonts-1.jpg?alt=media&#x26;token=f4ae820c-0e47-470e-b92c-fee8475d78ce" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FBU1kph3Gnuzr1frxxdGi%2Ftypography-adobe-fonts-7.jpg?alt=media&#x26;token=c621f0da-6e6e-4d5a-b235-004f20c851d2" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F04myws0wj5PHVnBIy7QZ%2Ftypography-adobe-fonts-5.jpg?alt=media&#x26;token=3e2fc7e1-306f-4ab7-abd6-28513b8a57e1" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fz85mABNsgt4lCAwMqT54%2Ftypography-adobe-fonts-4.jpg?alt=media&#x26;token=738af4e5-52b2-4d3b-81a9-bdfeeeeb3ffa" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fpu7wUjTWnCjQukUqS5z7%2Ftypography-adobe-fonts-6.jpg?alt=media&#x26;token=fc3df844-c732-42ea-9e15-bed3a32b1b15" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F18DdXTPyBfaJHGsQhhy4%2Ftypography-font-1.jpg?alt=media&#x26;token=3361dbac-7b97-41cc-8c00-f714a1be8b22" alt=""><figcaption></figcaption></figure>

### 8. Choose the Font Source

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

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FcrlZyY4SV2e9IkKBbdca%2Ftypography-adobe-fonts-3.jpg?alt=media&#x26;token=01609ad6-ca26-4f18-b585-c53178a8f386" alt=""><figcaption></figcaption></figure>

### 9. Select Your Font <a href="#id-3.-select-your-font" id="id-3.-select-your-font"></a>

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.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2FTrjCK5xu6fgr8AWIefK0%2Ftypography-adobe-fonts-2.jpg?alt=media&#x26;token=064cb058-5f04-4d6f-95ed-02e8f0caeee2" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2F7i0vSISF0PvRILJL9die%2Ftypography-font-4.jpg?alt=media&#x26;token=45abb746-093e-40a2-aa5e-0c4179030456" alt=""><figcaption></figcaption></figure>

### 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kaliumtheme.com/typography/fonts/how-to-add-a-font/adding-adobe-fonts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.