Looking for
or
?
We've rebranded!
v5.8
v5.7
v5.6
v5.11
v5.10
v5
v4
API Docs

Text

Text tool

A picture says more than a thousand words, however sometimes it still takes a few more. The robust text feature of the PhotoEditor SDK provides all necessary functions for quickly adding text to any picture or creative. The corresponding font library can easily be exchanged, reduced, or expanded.

Adding custom fonts

You can add custom fonts by passing them using the additionalFonts option.

If replaceFonts is set to true, all default fonts are removed. If it is set to false, your additional fonts are appended.

const editor = new PhotoEditorSDK.UI.ReactUI({
  controlsOptions: {
    text: {
      additionalFonts: [
        {
          name: 'comicsans',
          fontFamily: 'Comic Sans MS',
          fontWeight: 'normal'
        }
      ],
      replaceFonts: false
    }
  }
})

Adding google fonts

The additionalFonts option also allows you to add custom fonts from Google Fonts:

const editor = new PhotoEditorSDK.UI.ReactUI({
  controlsOptions: {
    text: {
      additionalFonts: [
        {
          name: 'shrikhand',
          fontFamily: 'Shrikhand',
          provider: 'google' // This loads the font from Google Fonts
        }
      ],
      replaceFonts: false
    }
  }
})

Specifying the available fonts

Per default, all existing fonts (including your own) are available to the user. To make only specific fonts available to the user, use the selectableFonts option.

const editor = new PhotoEditorSDK.UI.ReactUI({
  controlsOptions: {
    text: {
      selectableFonts: [
        'helvetica',
        'verdana',
        'times-new-roman',
        'impact',
        'comicsans'
      ]
    }
  }
})