I recently ran into the issue of emoji that I was sure FirefoxOS had already implemented not showing up in my app (Firegraph).

Many of the Instagram comments that were being displayed were filled with little boxes with numbers in them, despite the many emojis that are implemented already, as described in a blog post on Emoji by Patryk on the Mozilla UX team.

After a few web searches to try and determine what was causing this, I realized that the problem was that I was using the incorrect font (or maybe an outdated version of gaia styling). Instead of attempting to rebuild gaia (and identify the missing component), I decided to use the work done by the Mozilla UX team on the icons.

This consisted of:

Adding a new font-face declaration for the font to my app styling:

@font-face {
  font-family: "FirefoxEmoji";
  src: url('/assets/fonts/FirefoxEmoji.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Out-specifying the current gaia styles (they were using simply * to set a global font) I was using, to use the emoji font as a fallback

/* Fix emojis (also need to out-specify gaia styles) */
*, body { font-family: FiraSans,FirefoxEmoji }

And presto-chango, I had (mostly) working/visible/beautiful fonts displaying in my app. Hope this helps any people out there who might be scratching their heads with this issue!

PS – If you don’t feel like building the github project, and want a shortcut to the TTF file, Open up your trusty devtools on the demo site