Using Adobe Fonts on Your Botiga Sites

Want to use a typeface from Adobe Fonts on your Botiga site? The Adobe Fonts module in Botiga lets you connect your Adobe account and load any of your selected fonts in the Customizer’s typography options.

In this guide, we’ll walk you through how to use Adobe Fonts in Botiga.

Before you get started, make sure you’ve installed and activated the Botiga theme on your WordPress site. If you’re using features from Botiga Pro, ensure that both the Botiga theme and the Botiga Pro plugin are installed and active.

Enabling the Adobe Fonts Module

Adobe Fonts is bundled with Botiga as a module. To activate it, go to Appearance >> Theme Dashboard >> Theme Features and toggle the Adobe Fonts module on.

Adobe Fonts module in the Botiga theme dashboard

Once the module is enabled, find the Adobe Fonts options at Appearance >> Customize >> Typography >> General:

Adobe Fonts option in the Customizer typography settings

Select Adobe Fonts and a new field for your Adobe Fonts API token will appear:

Adobe Fonts API token field

Selecting Fonts and Generating an API Token

  1. Visit the Adobe Fonts website and create an account.
  2. Optional: if you don’t have a Creative Cloud subscription, filter the search results to show only free fonts.

Filtering free fonts on Adobe Fonts

  1. Select the font you want to use and click the code icon.

Code icon on an Adobe Fonts family page

  1. A popup will open with more steps:
  2. Enter the project name.
  3. Select the font variations you want to include.
  4. Click Create.

Adobe Fonts project creation popup

  1. Click Done.

Project created confirmation

  1. Click your profile avatar in the top-right corner and select API Tokens.

API Tokens menu item under the user avatar

  1. Click Make me a new API Token to generate a new token.

Generating a new Adobe Fonts API token

  1. Back in your site’s Customizer, paste the API token into the field and click Get Fonts.

Pasting the API token in the Customizer

A list of your Adobe Fonts projects appears below the fields. Enable or disable any project or font at any time.

List of loaded Adobe Fonts

  1. Go to Appearance >> Customize >> Typography (Headings or Body) and pick the font family you want to apply.

Selecting an Adobe Font in the typography options

Frequently Asked Questions

Below, we’ve answered some of the most common questions about using Adobe Fonts in Botiga.

Do I need a paid Adobe subscription?

Not necessarily. Adobe Fonts offers free fonts even without a Creative Cloud subscription. Filter the search results to show only free fonts if you’re on a free Adobe account.

Where do I find my Adobe Fonts API token?

Log in to Adobe Fonts, click your profile avatar in the top-right corner, and choose API Tokens. From there, generate a new token and paste it into the Botiga Customizer.

Can I use both Adobe Fonts and Google Fonts on the same site?

Botiga’s typography options let you pick one font family per element. You can mix sources across elements (Adobe Fonts for headings, Google Fonts for body, for example), but each element uses one family at a time.

That’s it! You’ve successfully loaded Adobe Fonts in Botiga.

Next, would you like to align your colors with your new typography? Check out our guide on customizing color options in Botiga to learn more.