Customize Fonts - Vanilla JS

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

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  // baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.62.0/assets',
  theme: 'light',
  ui: {}
};

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',
    withUploadAssetSources: true
  });

  // 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'
          }
        ]
      }
    }
  });

  instance.ui.updateAssetLibraryEntry('ly.img.typefaces', {
    sourceIds: ['my-custom-typefaces']
  });

  await instance.createDesignScene();
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      html {
        overscroll-behavior-x: contain;
      }
    </style>
  </head>

  <body>
    <div id="cesdk_container" style="width: 100%; height: 100vh"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

The CreativeEditor SDK allows adding text elements to the scene. The available fonts can be controlled by creating custom asset sources and then updating the typeface library entry using the API.

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 then updating the typeface library entry using cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', { sourceIds: [...] }). 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:

// 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'
        }
      ]
    }
  }
});

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

name: 'Orbitron',

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.

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'
  }
]

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 update the typeface library entry to exclude the default asset source ly.img.typeface.

cesdk.ui.updateAssetLibraryEntry('ly.img.typefaces', {
  sourceIds: ['myCustomTypefaces'] // Only include your custom source, excluding 'ly.img.typeface'
});