Home

Customizing Ant Design Tokens

It's important that what you see in Gutenberg is what you get on a published page. Customizing your Ant Design tokens for the Gutenberg editor is a must for this continuity. We've made this easy & theme-specific by reading an antd-theme.json in the active theme's directory.

1. Create a antd-theme.json file in the root of your active theme's directory
2. Copy & paste your custom Ant theme config:

{
  "token": {
    "colorPrimary": "#dd0092"
  }
}

Customizing Gutenberg Font Families

Similar to how the Ant Design tokens work, to customize the font family options, update/create the theme's theme.json:

{
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
          "slug": "system-fonts",
          "name": "System fonts"
        }
      ]
    }
  }
}