Fonts & Typefaces

The CreativeEditor SDK allows adding text elements to the scene. The available fonts can be controlled through the config.ui.typefaceLibraries object and by creating custom asset sources.

Explore a full code sample on Stackblitz or view the code on Github.

Added typefaces are directly accessible from the typeface dropdown in the text inspector:

Configuring Custom Typefaces#

You can define your own typefaces by creating a custom asset source and by registering it in the configuration under ui.typefaceLibraries. Each of the asset objects in the asset source must define a value for its payload.typeface property. A typeface consists of the following properties:

name: string the name of the typeface, which is also shown in the dropdown.

fonts[]: Object an array of objects, where each object describes a single font of the typeface. Each font has the following properties:
- uri: 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.
- subFamily: string of the font. This is an arbitrary string as defined by the font file, e.g. 'Regular', 'ExtraBold Italic', 'Book', 'Oblique', etc. It is shown in the style dropdown in the inspector which lets users choose between all fonts of the selected typeface.
- weight: string of the font. One of thin, extraLight, light, normal, medium, semiBold, bold, extraBold, heavy. Defaults to normal.
- 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 id of our default asset source ly.img.typeface from the ui.typefaceLibraries array in the editor configuration.


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

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.31.0/assets',
  theme: 'light',
  ui: {
    typefaceLibraries: [
      // 'ly.img.typeface',
      'my-custom-typefaces'
    ]
  },
  presets: {
    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' });

  // Add a custom typeface asset source.
  instance.engine.asset.addLocalSource('my-custom-typefaces');
  instance.engine.asset.addAssetToSource('my-custom-typefaces', {
    id: 'orbitron',
    label: {
      en: 'Orbitron'
    },
    payload: {
      typeface: {
        name: 'Orbitron',
        fonts: [
          {
            uri: `${window.location.protocol}//${window.location.host}/Orbitron-Regular.ttf`,
            subFamily: 'Regular',
            weight: 'regular',
            style: 'normal'
          },
          {
            uri: `${window.location.protocol}//${window.location.host}/Orbitron-Bold.ttf`,
            subFamily: 'Bold',
            weight: 'bold',
            style: 'normal'
          }
        ]
      }
    }
  });

  await instance.createDesignScene();
});