Skip to main content

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.
import '';
let config = {
baseURL: '',
theme: 'light',
presets: {
typefaces: {
orbitron: {
family: 'Orbitron',
fonts: [
fontURL: `${window.location.protocol}//${}/Orbitron-Regular.ttf`,
weight: 'regular',
style: 'normal'
fontURL: `${window.location.protocol}//${}/Orbitron-Bold.ttf`,
weight: 'bold',
style: 'normal'
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/