Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Language:

Adding Typefaces

The CreativeEditor SDK allows adding text elements to the scene. The available fonts can be controlled through the config.presets.typefaces object.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Added fonts are directly accessible from the font dropdown in the text inspector:



Configuring Custom Typefaces#

You can define your own typefaces in the configuration under presets.typefaces. The keys of these items identify font families. Each family consists of the following structure:

  • family: string the name of the family, which is also shown in the dropdown.
  • fonts[]: Object an array of objects, where each objects describes a single font or style of the typeface.
  • fontURL: string points at the font file for this font style. Supports http(s):// and relative paths which resolve to the baseURL.
  • weight: string of the font. One of thin, extraLight, Light, normal, medium, semiBold, bold, extraBold, heavy.
  • style: string of the font. One of normal & italic, defaults to normal.
File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.11.1/cesdk.umd.js';


let config = {
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.11.1/assets',
  theme: 'light',
  presets: {
    typefaces: {
      orbitron: {
        family: 'Orbitron',
        fonts: [
          {
            fontURL: `${window.location.protocol}//${window.location.host}/Orbitron-Regular.ttf`,
            weight: 'regular',
            style: 'normal'
          },
          {
            fontURL: `${window.location.protocol}//${window.location.host}/Orbitron-Bold.ttf`,
            weight: 'bold',
            style: 'normal'
          }
        ]
      }
    }
  }
};


CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
  /** do something with the instance of CreativeEditor SDK **/
});