How do I use emoji color fonts?

Post reply
0 favourites
  • 14 posts
From the Asset Store
Antidote Horror Pixel Font Sprite Font
$2.49 USD
Horror Halloween Pixel Art Sprite Font Space Data included
Antidote Studios's avatar
Antidote Studios

  • Hey,

    Emojis, as you might know, are a pain to deal with on the web. Everyone and their grandma has made a custom emoji set, and has made their own format for emoji fonts.

    (source: css-tricks.com/it-all-started-with-emoji-color-typography-on-the-web/)

    However things are starting to get better with things like EmojiOne, and Twemoji that are starting to give ways to use color fonts on every browser and have consistant emojis across all of them. This is great.

    However I can't seem to figure out how to get C3 to use my emoji font.

    Using a font bbcode tag doesn't work

    Including it using CSS doesn't seem to work either (I guess because it can't fetch the font file from the blob URL).

    Anyone has any idea if this is possible?

  • Are you using actual unicode emoji or something like emoji short codes like :smile:? It should be as simple as pasting the emoji into your text field, then setting the font.

  • I am using the unicode emoji.

    Well, the emoji appears, it's just using the default system emoji set instead of my font.

    And wrapping the emoji unicode with font tags seems to make the emoji disappear :/

    EDIT: Note that I want to use emojis in Texts as well, not only textboxes

  • Might be that something in our BBCode parser doesn't like emoji, you got a minimal project I can take a peek at?

  • Sure, I'll try to make something real quick

  • The Text object supports the system default color emoji:

    If you are trying to import a web font with different emoji, I'm not sure if that works... emoji normally have special separate handling in the browser/OS since they render with color, and I think sometimes there is the concept of font switching too - i.e. when finding an emoji character, it switches away from the current font to the system emoji font and renders the emoji there, so emoji always work in every font regardless of whether the font has its own emoji or not (and likely most don't have any). So support for emoji from a specific font probably needs to be specially implemented, and I'm not sure what the browser/OS support for that is like.

  • The example you sent actually appears to render correctly for me, the emoji is in the Twemoji font and the text is mostly in the default font. The piece of text AFTER the emoji appears in a different font for some reason.

  • Oh? Weird. What Browser + version are you using? :o

  • Here's a clearer test: dropbox.com/s/fqduhek8ncez338/emojifonttest2.c3p

    It seems to work fine in Chrome and Firefox on Windows, and Chrome on Android. It doesn't work in Edge on Windows, but that is due to be replaced with Chromium-based edge soon anyway. I haven't tried Safari though.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Ok, in that case, it doesn't seem to work properly on Chrome for Mac. That's an issue as it doesn't solve the issue it was supposed to solve initially :/

    EDIT: Ok it works properly on Chrome and Firefox for Linux (Tested with PopOS) It works on Safari for Mac, but the font doesn't change back to the regular font used before the Emoji (and defaults to Times new roman) and loading Twemoji just seems to fail on Chrome for Mac.

    This is better than what I initially thought from my tests, I just happened to test with the worst possible tools. That bug with the font not reverting back seems to be a weird one though, you might wanna look into it

  • That bug with the font not reverting back seems to be a weird one though

    It's just a typo in the BBcode. It says [\font], not [/font].

  • Ah.

    Yeah, ok. Only bug that remains is on Chrome for Mac then.

    EDIT: Firefox Mac has the same issues.

    Thanks for your help guys :)

  • I think Chrome leverages at least part of the system text renderer, as I suspect Firefox does. So it might be an edge case related to the macOS font system used in this specific context. I'm not super familiar with our text rendering system, but I expect it's treading the pass less travelled when it comes to text rendering in the browser.

    Managed to find this mention of the Chromium text rendering.

Post reply
  • 14 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)