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 on Stackblitz 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. TrueType, OpenType, and WOFF (and WOFF2) formats are supported.

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.

Removing the Default Typefaces#

In case you want to remove all of the default typefaces we ship with the CE.SDK editor, you need to remove the typeface extension from the extensions configuration. Since typefaces are the only extension left working as an extension, it is enough to clear the configuration to an empty array.


import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.24.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.24.0/assets',
  theme: 'light',
  extensions: {
    baseURL: '/extensions/',
    // This will remove our default typefaces from the editor
    entries: []
  },
  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'
          }
        ]
      }
    },
    callbacks: { onUpload: 'local' } // Enable local uploads in Asset Library.
  }
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => {
  // Do something with the instance of CreativeEditor SDK, for example:
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  await instance.createDesignScene();
});