bricks_set_adobe_fonts

Phase 2IntermediateComplexity: 4/10

Configure Adobe Fonts (Typekit) integration

Overview

Configures Adobe Fonts (formerly Typekit) integration in Bricks Builder. Provide your Adobe Fonts project ID and the font families included in the project to load them from Adobe’s CDN.

After configuration, the specified fonts become available in Bricks typography font-family dropdowns and can be used in theme styles, global classes, and inline typography settings — just like custom uploaded fonts or Google Fonts.

Adobe Fonts are loaded via a JavaScript embed from Adobe’s CDN, which handles font delivery, caching, and subsetting automatically.

Key Features

CDN Font Delivery

Fonts are loaded from Adobe's globally distributed CDN with automatic subsetting, caching, and optimized delivery.

Multi-Font Projects

A single Adobe Fonts project can include multiple font families. Define each family with its available weights and styles.

Weight and Style Mapping

Specify exactly which weights (400, 600, 700, etc.) and styles (normal, italic) are available for each font, so Bricks can offer the correct options.

Immediate Availability

After configuration, fonts appear in all typography dropdowns throughout Bricks Builder immediately.

When to Use

When the design uses Adobe Fonts (Typekit) that are not available as downloadable files
When you have an Adobe Creative Cloud subscription with fonts.adobe.com access
When the client has already set up an Adobe Fonts project and provided the project ID
When you need high-quality commercial fonts without self-hosting

Prerequisites

An active Adobe Fonts project at fonts.adobe.com with fonts added
The project ID from the Adobe Fonts web project settings
Knowledge of the CSS font-family names and available weights for each font in the project

When NOT to Use

When the font is available in Google Fonts (Bricks loads these natively for free)
When you have downloadable font files (use bricks_upload_font for self-hosting)
When the client does not have an Adobe Creative Cloud subscription
When GDPR compliance requires avoiding third-party CDN font loading

Parameters

2 Total Parameters2 Required

project_idstringREQUIRED

Adobe Fonts project ID from fonts.adobe.com. Found in your web project settings (e.g., "abc1def").

fontsarrayREQUIRED

Array of font family objects included in this Adobe Fonts project. Each object has: family (string — the CSS font-family name, e.g., "source-sans-pro"), weights (array of strings — available weights like ["400", "600", "700"]), and styles (array of enums — available styles: "normal" and/or "italic", defaults to ["normal"]).

Code Examples

Configure Adobe Fonts with two families

Set up an Adobe Fonts project with Source Sans Pro and Source Serif Pro.

JSON

{
  "project_id": "abc1def",
  "fonts": [
    {
      "family": "source-sans-pro",
      "weights": ["400", "600", "700"],
      "styles": ["normal", "italic"]
    },
    {
      "family": "source-serif-pro",
      "weights": ["400", "700"],
      "styles": ["normal"]
    }
  ]
}

Response

{
  "success": true,
  "project_id": "abc1def",
  "fonts_count": 2,
  "message": "Adobe Fonts configured with 2 font families."
}

Common Mistakes

Warning: Undefined array key "fix_description" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 47

Deprecated: preg_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-includes/kses.php on line 2018

Warning: Undefined array key "wrong_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 48

Warning: Undefined array key "right_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 49

The family value must match the exact CSS name from Adobe Fonts, not the display name. For example, use "source-sans-pro" (CSS name), not "Source Sans Pro" (display name). Check fonts.adobe.com for the correct CSS name.

Warning: Undefined array key "fix_description" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 47

Deprecated: preg_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-includes/kses.php on line 2018

Warning: Undefined array key "wrong_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 48

Warning: Undefined array key "right_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 49

Only list weights that are actually enabled in your Adobe Fonts project. Including unavailable weights will show them in dropdowns but they will not render correctly.

Warning: Undefined array key "fix_description" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 47

Deprecated: preg_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-includes/kses.php on line 2018

Warning: Undefined array key "wrong_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 48

Warning: Undefined array key "right_code" in /var/www/vhosts/mcpbricksbuilder.wecode.swiss/httpdocs/wp-content/themes/bricks/includes/elements/code.php(236) : eval()'d code on line 49

If the Adobe Creative Cloud subscription lapses, fonts stop loading. Ensure the project remains active for production sites.

Tips & Warnings

Tip: Find your project ID at fonts.adobe.com/my_fonts under the « Web Projects » section. The project ID is the short alphanumeric code shown next to each project.

Tip: After configuring Adobe Fonts, reference them in theme styles: typographyBody: { "font-family": "source-sans-pro" }.

Warning: Adobe Fonts are loaded from a third-party CDN. For GDPR compliance in the EU, ensure you have proper consent mechanisms or consider self-hosting fonts instead using bricks_upload_font.

Warning: Calling this tool again with a different project_id will replace the entire Adobe Fonts configuration. There is no merge — the previous project fonts will be removed.

Return Values

Field	Type	Description
`success`	boolean	Whether the Adobe Fonts configuration was saved successfully.
`project_id`	string	The configured Adobe Fonts project ID.
`fonts_count`	number	Number of font families registered from the project.
`message`	string	Confirmation message.

Related Tools

Technical Details

Tool ID

bricks_set_adobe_fonts

API Endpoint

/design-system/fonts/adobe

HTTP Method

PUT

Namespace

design-system

Source File

design-system/fonts.ts

Version

1.0

Min Bricks Version

1.9

Requires Auth

Yes

Changelog

v1.0

Initial release with multi-family project support.

20250101