Installing on Firefox

[NotoIsBest]

Hello, @DeeDeeG and first of all thank you for making this font - I've been trying to get the Noto emojis on my Windows PC for months! I'm trying to install your font, but only on Firefox instead of systemwide. However, only very few of the emojis work, with the rest showing Segoe/Unicode symbols.

I've attached a few screenshots of what happens and will explain my method afterwards

The way I do it is: Have Stylish installed as a Firefox Addon, then install this userscript. The userscript overrides Hangouts' web emoji with the ones from Firefox's EmojiOne font, which is located in C:\Program Files (x86)\Mozilla Firefox\fonts. I moved that font out of said folder and replaced it with the Noto font, renaming it to match the removed font, however only few of the emojis actually display as seen on the 3rd screenshot. I assume this is because I haven't installed it systemwide, would there be any way to get around it (e.g. editing the Firefox implementation of EmojiOne myself)?

Edit: I missed saying - this is all on a Windows 7 PC

[DeeDeeG]

Hi, I will try to look into this during the weekend, or some time soon, but I may not get to it right away.

Anyways, thanks for trying the font, and filing this issue! Welcome to GitHub!

[NotoIsBest]

Hi again, and thanks! I've found an embarassing error I've made, thinking that simply renaming the font file would be enough to get Firefox to read it, while leaving the font family name as it is. I've just tried installing FontForge and setting your font's font family name to "EmojiOneMozilla" so it matches Firefox's one and it works! However after renaming it doesn't display colours, like so:

I'm not sure if I'm missing a setting - I just set it to generate as a TrueType font without changing anything except the name

[DeeDeeG]

Hi,

Do you have the latest Firefox? (Firefox 54.0.1)

Also, do you have all the latest Windows 7 updates?

I ask because it is working for me using Firefox 54 on fully updated Windows 7. I didn't try with the Stylish add-on, since it worked without. I'll try to figure this out with you if I can.

[DeeDeeG]

By the way FontForge doesn't understand color glyphs at the moment. Maybe it is deleting the colored glyphs. The ones you are seeing are separate black/white images that are also included in the font.

A new version of the font could be compiled with the internal name "EmojiOne Mozilla," and that would be more likely to work. It's pretty hacky though.

(On the one hand I'd like to see if you can get it working without several layers of workarounds.

But on the other hand, I think it's neat you are able to change the emoji to be the style you prefer.)

[NotoIsBest]

I do have the latest Firefox and Windows 7 updates, however that Stylish fontswap I mentioned in the first post isn't the only one I've tried. I have also tried forcing Firefox to load your font when installed on the system (by right clicking on it and clicking "install") using this different Stylish code:

@namespace url(http://www.w3.org/1999/xhtml);


@font-face
{
  font-family: 'EmojiOne Mozilla';
    src: local('Noto Color Emoji SVGinOT');
}

That mixes Noto and EmojiOne like shown in this screenshot:

The weird thing is that this only works IF the emojis are wrapped inside <span class="emoji"> or <div class="emoji>. If the emoji's unicode character is just inputted as regular text with no defined class, Firefox uses its EmojiOne, ignoring the CSS. As for compiling a new version with EmojiOne's internal name, that would most likely work - I didn't know FontForge doesn't understand color glyphs and assumed I did something wrong.

[DeeDeeG]

That mixes Noto and EmojiOne like shown in this screenshot: [screenshot]

By the way, the version of the font I have released here is the older one, equivalent to Android Lollipop. It doesn't have the newest emoji, such as shrimp, bacon, avocado, cowboy, rolling on floor laughing, etc.

So you are seeing Noto emoji where this font has them, then EmojiOne as a fallback. That's about as good as it's gonna get. (Actually, I have a version that's pretty much on par with Android Nougat, but I haven't completed it. If there's an interest, I can release that version as well. It would take me some time though. I plan to keep this version available in any case, because I like the blobby emojis personally.)

The weird thing is that this only works IF the emojis are wrapped inside or <div class="emoji>.

🤷 I have no idea why. Trying to improve Emoji support in browsers turns up the strangest bugs.

I'll compile a version with the internal name "EmojiOne Mozilla" and see if that works for you.

I didn't know FontForge doesn't understand color glyphs

I believe it hasn't been updated since the color (emoji) font formats were standardized a year or two ago.

[DeeDeeG]

Here's a version that pretends to be EmojiOne Mozilla, as discussed above.

NotoColorEmoji-SVGinOT-pretends-to-be-EmojiOne-Mozilla.ttf.zip

[NotoIsBest]

I would say the Lollipop version may have been the best Noto version (for example the gender neutral "people" blobs, the happy arms-up blob (🙌) instead of just being cut down to two hands). I personally have mixed feelings for the Nougat version however, with changing all blobs to face forward and replacing a lot of them with people, but it does have nice additions (thinking face, the cowboy one you mentioned, upside down smile, etc). Are your plans for adding a version on par with nougat Nougat the exact N Noto font itself or just adding the new emojis from it to the current Lollipop one to fill the missing glyphs? I would be very interested in the latter one, but I don't want to press - you've already done a lot!

On the CSS bug, I'm really not sure what's going on there - I found out about the "emoji" HTML class by accident when looking through the pages' source code looking for what's wrong).

Lastly, the sneaky Noto disguised as EmojiOne Mozilla does work! Every page that shows emoji, including Hangouts, is now showing them properly! Thank you very much, I never thought I'd be able to have them on PC!

[DeeDeeG]

I would say the Lollipop version may have been the best Noto version . . .

Funny you should say that, I feel mostly the same way, for similar reasons as you have put.

Are your plans for . . . adding the new emojis from [Nougat] to the current Lollipop [font version] to fill the missing glyphs?

My secret plan was to do this, but without any signals from other folks that this was wanted, I wasn't sure how I was going to explain what the "hybrid" version even is. So I don't want to confuse people. I think I can figure out a way to explain it.

I probably will work on that soon, because I was waiting to see if Google would shake things up at their repo, and they haven't done much lately: https://github.com/googlei18n/noto-emoji/commits/master

Not to over-promise: there are a few emoji they haven't provided as SVGs, and even then some of them are causing me errors that I can't totally figure out. But I can definitely add most of the new glyphs. I'm thinking a new release with a "Nougat" edition, and a "Hybrid" edition where I pick the best images, largely favoring Lollipop.

I think the pink thumbs up, and related hands are funky and unique, but the yellow and skin tone varieties seem to make more natural sense IMO. I'd like to see a bit of research done about which are the best noto renditions of each emoji.

. . .

Lastly, the sneaky Noto disguised as EmojiOne Mozilla does work! Every page that shows emoji, including Hangouts, is now showing them properly! Thank you very much, I never thought I'd be able to have them on PC!

Woo! 🙌 Great to hear it. Glad I could help. I think myself and the other folks with emoji fonts here on GitHub are doing it out of a love of emoji, so it's nice to know someone benefited from the project.

[NotoIsBest]

I actually had a similar idea a few months ago about making a hybrid mix between the new and old versions of the font - I was looking into doing it by decompiling and recompiling the font taken directly from Android (taking Nougat, replacing all the old stuff with Lollipop's stuff - blobs, pink hands, etc. using this tool) , but I hit a wall there when I found out its format is not supported by Windows (I think it was CBLC+CBDT). I've been searching for a different way to do it ever since, until I found your version!

I've also found the blobs are quite popular in my searches (particularly in Discord), so there may be interest in different versions for browser/system use! A bit weird Google haven't had a lot on activity on their repo though... I was even worried about the blobs on it being replaced by the O emojis 😷.

Also another idea I've had ever since they announced the O emojis is creating blobs to put in their place for new Unicode. I've done some work with vector editing before and wouldn't mind giving it a go if needed, especially after seeing a few community-created emojis already, for example:

I agree on the pink hands being unique and better looking (after mentioning it at the start!), and in general feel more distinguishable than the yellow tone ones. On research, I'll try to find the discussions on the blobs when the O change was announced and link them here!

I agree on the emoji font projects here being out of love! Your support is amazing, and I'm atually a little surprised I didn't find your project earlier

[NotoIsBest]

Hey, I saw you've released a hybrid version of Lollipop + Nougat (awesome!), but I'm having the same problem with Firefox where they don't show up fully because it doesn't use the EmojiOne Mozilla name. Is there any, uhh, hidden version pretending to be it again somewhere? 😅 I saw a repo about it but didn't see a .ttf unless I'm being blind

[DeeDeeG]

Yeah, I'm realizing I'm going to want a "Firefox-[so-and-so]-.zip" for all my releases, because it seems like a good idea, but I hadn't gotten around to doing all of them. I can certainly spin one up for you in the mean-time.

I'll make it some time today, barring some crazy thing taking up my time unexpectedly.

[DeeDeeG]

Here it is!

NotoColorEmoji-SVGinOT-pretends-to-be-EmojiOne-Mozilla.ttf.zip

(I've also got a way to build these as a part of the normal release process, instead of having to do it custom for each new release. That will probably be uploaded into all the branches at some point soon.)

I'm re-using/borrowing most of the tech here from @eosrei 's repos, so I'm learning most of it as I go, to be honest.

(Hi eosrei, if you're reading this!)

[NotoIsBest]

Ahh, thanks a lot again (and to eosrei too!)! No more squares for the missing glyphs and hybrid is just perfect 😆!

[DeeDeeG]

Hi again. This is mostly fixed now; I rebased (updated/changed the commit history of) the repo a while back and made sure that Firefox builds are enabled for all releases.

Actually using the Firefox version of the font is undocumented and not officially explained for now, and the compiled fonts for Firefox only are not on the releases page. But if there is a lot of interest I can add some documentation (and compile/release the fonts).

Firefox support probably has to be updated, now that Firefox has switched to "twemoji": https://github.com/mozilla/twemoji-colr

I was going to close this issue, but I guess I'll keep it open for switching the Firefox family name to Twemoji Mozilla.

Thanks again for the interest in this project!

[NotoIsBest]

Ahh, nice! Hopefully others will see this and say if they're interested (can you see how many times the fonts have been downloaded recently actually?)

As for the twemoji switch support, I found a way around it back when it happened - going to about:config and finding font.name-list.emoji, which if I remember right was set to Twemoji Mozilla, Segoe UI Emoji. I deleted both entries and replaced them with just EmojiOne Mozilla, and it started working just as it did before.