Skip to content

Emojis

Text blocks in CE.SDK support the use of emojis. A default emoji font is used to render these independently from the target platform. This guide shows how to change the default font and use emojis in text blocks.

Change the Default Emoji Font

The default font URI can be changed when another emoji font should be used or when the font should be served from another website, a content delivery network (CDN), or a file path.

The preset is to use the NotoColorEmoji font loaded from our CDN. This font file supports a wide variety of Emojis and is licensed under the Open Font License. The file is relatively small with 9.9 MB but has the emojis stored as PNG images.

As an alternative for higher quality emojis, e.g., this NotoColorEmoji font can be used. This font file supports also a wide variety of Emojis and is licensed under the SIL Open Font License, Version 1.1. The file is significantly larger with 24.3 MB but has the emojis stored as vector graphics.

In order to change the emoji font URI, call the setSettingString(keypath: string, value: string) Editor API with ‘defaultEmojiFontFileUri’ as keypath and the new URI as value.

let uri = engine.editor.getSettingString('ubq://defaultEmojiFontFileUri');
// From a bundle
engine.editor.setSettingString(
  'ubq://defaultEmojiFontFileUri',
  'bundle://ly.img.cesdk/fonts/NotoColorEmoji.ttf'
);
// From a URL
engine.editor.setSettingString(
  'ubq://defaultEmojiFontFileUri',
  'https://cdn.img.ly/assets/v2/emoji/NotoColorEmoji.ttf'
);

Add a Text Block with an Emoji

To add a text block with an emoji, add a text block and set the emoji as text content.

const text = engine.block.create('text');
engine.block.setString(text, 'text/text', 'Text with an emoji 🧐');
engine.block.setWidthMode(text, 'Auto');
engine.block.setHeightMode(text, 'Auto');
engine.block.appendChild(page, text);

Full Code

Here’s the full code:

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/assets',
};


CreativeEngine.init(config).then(async engine => {
  document.getElementById('cesdk_container').append(engine.element);


  let uri = engine.editor.getSettingString('ubq://defaultEmojiFontFileUri');
  // From a bundle
  engine.editor.setSettingString(
    'ubq://defaultEmojiFontFileUri',
    'bundle://ly.img.cesdk/fonts/NotoColorEmoji.ttf',
  );
  // From a URL
  engine.editor.setSettingString(
    'ubq://defaultEmojiFontFileUri',
    'https://cdn.img.ly/assets/v2/emoji/NotoColorEmoji.ttf',
  );


  const scene = engine.scene.create();


  const page = engine.block.create('page');
  engine.block.setWidth(page, 800);
  engine.block.setHeight(page, 600);
  engine.block.appendChild(scene, page);


  engine.scene.zoomToBlock(page, 40, 40, 40, 40);


  const text = engine.block.create('text');
  engine.block.setString(text, 'text/text', 'Text with an emoji 🧐');
  engine.block.setWidthMode(text, 'Auto');
  engine.block.setHeightMode(text, 'Auto');
  engine.block.appendChild(page, text);
});