Linux Firefox huge space characters with Noto Color Emoji font

[Aggtaa]

On an ubuntu linux Firefox renders all text with huge spaces between words like this:

At the same box Google Chrome renders text fine. The box is an Ubuntu 21.10 linux, Firefox 96.0.2, Noto Color Emoji font is installed the from Ubuntu repo: https://packages.ubuntu.com/impish/fonts-noto-color-emoji

Package: fonts-noto-color-emoji
Version: 2.028-1
Priority: optional
Section: fonts
Origin: Ubuntu
Maintainer: Ubuntu Developers <ubuntu-devel-discuss@lists.ubuntu.com>
Original-Maintainer: Debian Fonts Task Force <pkg-fonts-devel@lists.alioth.debian.org>

The issue is reproduced here: https://jsfiddle.net/nemy8v29/3/

Not sure if this is the right place to report this, let me know if it's not.

[anthrotype]

Noto Color Emoji is, well, for emojis.. "Hello there kitty kitty" is not emojis. Try 😺

[Aggtaa]

I don't really understand how fonts work or how browsers combine multiple fonts, From my understanding, the issue is that Noto Color Emoji also tries to handle whitespace and does it incorrectly.

Looking into the TTF file installed, I can see it contains the space character. Is it how it's supposed to work?

> fc-match --format='%{charset}\n' "Noto Color Emoji"
20 23 2a 30-39 a9 ae 200d 203c 2049 20e3 2122 2139 2194-2199 21a9-21aa 231a-231b 2328 23cf 23e9-23f3 23f8-23fa 24c2 25aa-25ab 25b6 25c0 25fb-25fe 2600-2604 260e 2611 2614-2615 2618 261d 2620 2622-2623 2626 262a 262e-262f 2638-263a 2640 2642 2648-2653 265f-2660 2663 2665-2666 2668 267b 267e-267f 2692-2697 2699 269b-269c 26a0-26a1 26a7 26aa-26ab 26b0-26b1 26bd-26be 26c4-26c5 26c8 26ce-26cf 26d1 26d3-26d4 26e9-26ea 26f0-26f5 26f7-26fa 26fd 2702 2705 2708-270d 270f 2712 2714 2716 271d 2721 2728 2733-2734 2744 2747 274c 274e 2753-2755 2757 2763-2764 2795-2797 27a1 27b0 27bf 2934-2935 2b05-2b07 2b1b-2b1c 2b50 2b55 3030 303d 3297 3299 1f004 1f0cf 1f170-1f171 1f17e-1f17f 1f18e 1f191-1f19a 1f1e6-1f1ff 1f201-1f202 1f21a 1f22f 1f232-1f23a 1f250-1f251 1f300-1f321 1f324-1f393 1f396-1f397 1f399-1f39b 1f39e-1f3f0 1f3f3-1f3f5 1f3f7-1f4fd 1f4ff-1f53d 1f549-1f54e 1f550-1f567 1f56f-1f570 1f573-1f57a 1f587 1f58a-1f58d 1f590 1f595-1f596 1f5a4-1f5a5 1f5a8 1f5b1-1f5b2 1f5bc 1f5c2-1f5c4 1f5d1-1f5d3 1f5dc-1f5de 1f5e1 1f5e3 1f5e8 1f5ef 1f5f3 1f5fa-1f64f 1f680-1f6c5 1f6cb-1f6d2 1f6d5-1f6d7 1f6e0-1f6e5 1f6e9 1f6eb-1f6ec 1f6f0 1f6f3-1f6fc 1f7e0-1f7eb 1f90c-1f93a 1f93c-1f945 1f947-1f978 1f97a-1f9cb 1f9cd-1f9ff 1fa70-1fa74 1fa78-1fa7a 1fa80-1fa86 1fa90-1faa8 1fab0-1fab6 1fac0-1fac2 1fad0-1fad6 e0030-e0039 e0061-e007a e007f fe4e5-fe4ee fe82c fe82e-fe837

[anthrotype]

yes, NotoColorEmoji contains the space character (0x0020), which matches the width of the rest of the emojis. It is how it's supposed to be. If you don't want to style space using NotoColorEmoji you should put it after another non-emoji font in the font-family list, say Times or Arial or whatever you like.

[anthrotype]

or you just apply it to the strings of text that only contain emojis

[Aggtaa]

Unfortunately, it's not my website, but the Nextcloud 23 official frontend. They apply it to body tag.

--font-face: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Cantarell, Ubuntu, Helvetica Neue, Arial, Noto Color Emoji, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
body {
    ...
    font-family: var(--font-face);
}

Is putting Noto Color Emoji ahead of letter fonts is not how the font is supposed to be used? I guess I should report this to Nextcloud then? Or to Canonical? Or to Mozilla?

[Aggtaa]

Thank you for support.

Issue resolved by uninstalling the "Noto Color Emoji" font.

[RedSnt]

I can't say for sure if this is the fix that'll help you, but putting the noto color emoji entry in the /usr/share/fontconfig/conf.avail/_conf_file_.conf that had the <family>Noto Color Emoji</family> entry listed further down the list so it wasn't the first one being read/loaded, that fixed an annoying error I had with Firefox at least. In my case I put it below other entries that contained emoji fonts that weren't even installed on my system, but that apparently satisfied my debian based system.