Overview

With version 1.61, Gameface adds support for certain types of emoji fonts. Emojis and colored text glyphs can enhance the visual fidelity of any Web component that includes displaying text. Gameface can now load fonts that contain emoji characters and use them in any text context.

Gameface officially supports the following fonts:

• EmojiTwoCOLRv0.ttf
• OpenMojiCOLRv0.ttf
• TwemojiCOLRv0.ttf
• Segoe UI Emoji

If you require a different emoji font or want to create a custom one, the font file must be in the COLRV0 format, as curently Gameface supports emoji fonts only in this format.

For more details, check out the Emoji Support section of our documentation.

Usage

To showcase the functionality of emoji fonts, we’ll walk you through updating our Chat emojis sample from the UI tutorials.

The enhancements we will be doing, include:

1. Rendering emojis directly from a supported emoji font - You’ll no longer need SVGs for emoji rendering. Instead, HTML character codes will render emojis directly, making it simpler to add new emojis to the emoji panel.
2. Native input field emoji support - Perhaps the most exciting enhancement is the ability to render emojis directly within input fields, whether added via JavaScript or pasted by users.

Previously, the Chat sample used a :emojicode: pattern in input fields, which didn’t visually render the emojis:

With emoji fonts, this limitation is resolved. Users will see a real-time preview of emojis in the input field, improving the chat’s user experience:

3. Simplified server-side processing - The server no longer needs to match :emojicode: patterns and replace them with SVGs. Messages will now display emojis rendered directly by the font.

Importing an emoji font

To enable usage of certain emojis, you need first to import a COLRV0 font file. For this guide, we’ll use the OpenMojiCOLRv0.ttf font built using the https://openmoji.org/ graphics:

1. Download the font on your machine.
2. Use the @font-face CSS rule to import the font.
3. Link the font file using the src property and assign it a font-family. For example, we’ll name our custom font OpenMoji.
4. Apply the font to relevant HTML elements (html, body, button, and input) to ensure consistency. Note that button and input elements use the system font by default, so explicitly applying the custom font is necessary.

1
@font-face {
2
    font-family: OpenMoji;
3
    src: url(./assets/OpenMojiCOLRv0.ttf);
4
}
5

6
html, body, button, input {
7
    font-family: 'Droid Sans', OpenMoji;
8
}

**Note: You need to set the default font-family for Gameface to ‘Droid Sans’, as the OpenMoji font lacks numeric symbols. This ensures numbers properly fall back to the default font. **

Now you’re ready to add emojis to the UI.

Updating the emoji panel button

To migrate the SVG icon for the emoji panel button, replace it with a direct emoji character in the HTML and remove the associated CSS background image styles.

1
<div id="form">
2
    <input
3
        id="input"
4
        autocomplete="off"
5
    />
6
    <div class="chat-buttons">
7
        <button class="open-emojis-panel-btn"></button>
8
        <button class="open-emojis-panel-btn">&#x0001F600;</button>
9
        <button class="send-btn">Send</button>
10
    </div>
11
</div>

Additionally, use the coh-font-fit property to adjust the emoji’s size to automatically fit within the button element. Previously, the background-image style used the contain property for this purpose.

You can read more about the coh-font-fit custom CSS property here .

1
.open-emojis-panel-btn {
2
    background-image: url(/assets/emojis-open-panel.svg);
3
    background-color: transparent;
4
    background-size: contain;
5
    coh-font-fit: fit;
6
    border: none;
7
    width: 3.5vh;
8
    height: 3.5vh;
9
    margin-right: 0.5vh;
10
    cursor: pointer;
11
    border-radius: 50%;
12
}

Making the emojis panel to work with the font

In the Chat sample, we initially implemented a panel where users could select emojis to include in their messages. Previously, emojis were displayed using SVG icons. Now, we’ll enhance this feature by switching to emoji fonts.

To render the emojis in the panel, we initially defined an array containing the paths to the SVG icons for each emoji. Then, using data-bind-for and data-bind-style-background-image-url attributes, we displayed all available emojis in the panel.

Now, we will adjust the array and update the panel in the HTML to use emoji fonts.

1
const emojis = [
2
    '/assets/emojis/1F600.svg',
3
    '\u{1F600}',
4
    '/assets/emojis/1F601.svg',
5
    '\u{1F601}',
6
    '/assets/emojis/1F602.svg',
7
    '\u{1F602}',
8
    '/assets/emojis/1F603.svg',
9
    '\u{1F603}',
38 collapsed lines
10
    '/assets/emojis/1F604.svg',
11
    '\u{1F604}',
12
    '/assets/emojis/1F605.svg',
13
    '\u{1F605}',
14
    '/assets/emojis/1F923.svg',
15
    '\u{1F923}',
16
    '/assets/emojis/1F642.svg',
17
    '\u{1F642}',
18
    '/assets/emojis/1F643.svg',
19
    '\u{1F643}',
20
    '/assets/emojis/1FAE0.svg',
21
    '\u{1F644}',
22
    '/assets/emojis/1F609.svg',
23
    '\u{1F609}',
24
    '/assets/emojis/1F60A.svg',
25
    '\u{1F60A}',
26
    '/assets/emojis/1F607.svg',
27
    '\u{1F607}',
28
    '/assets/emojis/1F970.svg',
29
    '\u{1F970}',
30
    '/assets/emojis/1F60D.svg',
31
    '\u{1F60D}',
32
    '/assets/emojis/1F929.svg',
33
    '\u{1F929}',
34
    '/assets/emojis/1F618.svg',
35
    '\u{1F618}',
36
    '/assets/emojis/1F617.svg',
37
    '\u{1F617}',
38
    '/assets/emojis/263A.svg',
39
    '\u{263A}',
40
    '/assets/emojis/1F61A.svg',
41
    '\u{1F61A}',
42
    '/assets/emojis/1F619.svg',
43
    '\u{1F619}',
44
    '/assets/emojis/1F972.svg',
45
    '\u{1F973}',
46
    '/assets/emojis/1F60B.svg',
47
    '\u{1F60B}',
48
];

1
const emojis = [
2
    '\u{1F600}',
3
    '\u{1F601}',
4
    '\u{1F602}',
5
    '\u{1F603}',
6
    '\u{1F604}',
7
    '\u{1F605}',
8
    '\u{1F923}',
9
    '\u{1F642}',
15 collapsed lines
10
    '\u{1F643}',
11
    '\u{1F644}',
12
    '\u{1F609}',
13
    '\u{1F60A}',
14
    '\u{1F607}',
15
    '\u{1F970}',
16
    '\u{1F60D}',
17
    '\u{1F929}',
18
    '\u{1F618}',
19
    '\u{1F617}',
20
    '\u{263A}',
21
    '\u{1F61A}',
22
    '\u{1F619}',
23
    '\u{1F973}',
24
    '\u{1F60B}',
25
];

In the HTML, we’ll also update the rendering logic to use the new emoji font approach.

1
<div
2
    class="emoji emoji-btn"
3
    data-bind-for="index,iter:{{emojis}}"
4
>
5
    <div
6
        data-bind-click="addEmoji({{index}})"
7
        data-bind-click="addEmoji({{iter}})"
8
        class="emoji-svg"
9
        data-bind-style-background-image-url="{{iter}}"
10
        data-bind-html="{{iter}}"
11
    ></div>
12
</div>

This change enables direct rendering of emoji Unicode characters using the data-bind-html attribute. Additionally, the iter variable now passes the emoji character code directly and this eliminates the need to pass the index when clicking an emoji.

Adding emoji to the message input

When a user selects an emoji from the panel, it will be inserted at the current caret position in the input field. Since we are now using fonts, we no longer need to insert the pattern :emojicode:. Instead, we can directly add the emoji character code, which will be rendered automatically.

Here’s the revised addEmoji method:

1
function addEmoji(emojiIndex) {
2
function addEmoji(emojiCodeString) {
3
    const emojiCodeString = `:${emojiIndex}:`;
4
    const newInputSelection = input.selectionStart + emojiCodeString.length;
5
    const inputValue = input.value;
6

7
    input.value = inputValue.substring(0, input.selectionStart) + emojiCodeString + inputValue.substring(input.selectionEnd, inputValue.length);
8
    input.setSelectionRange(newInputSelection, newInputSelection);
9
    input.focus();
10
    emojisPanel.hide();
11
}

Refactoring the server

The Chat sample uses a server to handle message delivery via WebSockets. Previously, the server replaced :emojicode: patterns with corresponding SVG elements before broadcasting messages. With the new font-based approach, this step is no longer necessary.

Here’s the updated server logic:

1
const emojis = require('./src/emojisMapServer');
2
...
3
socket.on('chat message', (msg) => {
4
    const newMessage = msg.replace(/:[0-9]*:/g, (match) => {
5
        const emojiCode = match.replace(/:/g, '');
6
        return `<img class="emoji" src="${emojis[emojiCode]}"/>`;
7
    });
8

9
    const d = new Date();
10
    const timeStamp = [d.getMonth() + 1, d.getDate(), d.getFullYear()].join('/') + ' ' + [d.getHours(), d.getMinutes(), d.getSeconds()].join(':');
11

12
    io.emit('chat message', { msg: `<div class="message">${newMessage}</div><div class="timestamp">${timeStamp}</div>`, id: socket.id });
13
    io.emit('chat message', { msg: `<div class="message">${msg}</div><div class="timestamp">${timeStamp}</div>`, id: socket.id });
14
});

By eliminating the need for SVG replacements, we simplify the server logic and improve performance.

Conclusion

These updates enhance the Chat sample by leveraging emoji fonts for rendering emojis in both the panel and the message input. The server logic is also simplified, as it no longer needs to process emoji patterns.

The emoji font support in Gameface is a great feature that can be used in many ways to enhance the visual fidelity of the UI components, including displaying text.

Where you can find the enhanced sample?

The updated Chat sample is available in the Samples/uiresources/UITutorials/ChatEmojisWithFonts folder of the Gameface package.

The original sample using SVG emojis can be found in the Samples/uiresources/UITutorials/ChatEmojis folder.