Waaard Logo
Managed F/OSS services on Hetzner, OVH and LeaseWeb
Recently Launched 🚀🧑‍🚀
Waaard Logo
Unvalidated Ideas
3 fresh Startup/SaaS ideas in your inbox, every week.
Recently Launched 🚀🧑‍🚀

Fixing emoji display in Firegraph


It's been a while since this was posted...

Hopefully the information in here is useful to you (if it isn't please get in touch!).
If you want to get the new stuff as soon as it's out though, sign up to the mailing list below.

Join the Mailing list

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 :)

Like what you're reading? Get it in your inbox