Skip to main content
CESDK/Web/Configuration/Presets
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.7.0/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets',
theme: 'light',
presets: {
typefaces: {
orbitron: {
family: 'Orbitron',
fonts: [
{
fontURL: '/Orbitron-Regular.ttf',
weight: 'regular',
style: 'normal'
},{
fontURL: '/Orbitron-Bold.ttf',
weight: 'bold',
style: 'normal'
}
]
}
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});