[RESOLVED] Firefox, other apps render numbers as emoji and wide spaces

droplpy · 2023-10-04 09:35:19

Both Firefox and my Todoist app (AppImage) behave very weirdly after installing ttf-apple-emoji. Uninstalling fixes it, but then there are no emojis.

Firefox:

Firefox

The numbers are somehow replaces with emoji's, and spaces are really wide?? Somehow it seems the emoji font takes precedence over everything, but I can't seem to figure out why.

These are the rules I have currently (they are all either default or from the `noto-fonts` package AFAICS):

10-hinting-slight.conf
10-scale-bitmap-fonts.conf
10-sub-pixel-rgb.conf
10-yes-antialias.conf
11-lcdfilter-default.conf
20-unhint-small-dejavu-lgc-sans.conf
20-unhint-small-dejavu-lgc-sans-mono.conf
20-unhint-small-dejavu-lgc-serif.conf
20-unhint-small-dejavu-sans.conf
20-unhint-small-dejavu-sans-mono.conf
20-unhint-small-dejavu-serif.conf
20-unhint-small-vera.conf
30-metric-aliases.conf
40-nonlatin.conf
45-generic.conf
45-latin.conf
46-noto-mono.conf
46-noto-sans.conf
46-noto-serif.conf
48-spacing.conf
49-sansserif.conf
50-user.conf
51-local.conf
57-dejavu-sans.conf
57-dejavu-sans-mono.conf
57-dejavu-serif.conf
58-dejavu-lgc-sans.conf
58-dejavu-lgc-sans-mono.conf
58-dejavu-lgc-serif.conf
60-generic.conf
60-latin.conf
65-fonts-persian.conf
65-nonlatin.conf
66-noto-mono.conf
66-noto-sans.conf
66-noto-serif.conf
69-unifont.conf
80-delicious.conf
90-synthetic.conf

There is a related issue on the Firefox bug tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=1763175. The rule that caused the issue there is not in my config.

This is my ~/.config/fontconfig/fonts.conf:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
  <alias>
    <family>serif</family>
    <prefer><family>Noto Serif</family></prefer>
  </alias>
  <alias>
    <family>sans-serif</family>
    <prefer><family>Noto Sans</family></prefer>
  </alias>
  <alias>
    <family>sans</family>
    <prefer><family>Noto Sans</family></prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer><family>Iosevka</family></prefer>
  </alias>
</fontconfig>

Last edited by droplpy (2023-10-05 11:58:43)

seth · 2023-10-04 11:56:13

Step #1: use the FF web inspector to see which fonts are in the css list for the affected elements.
Step #2: "fc-match" them
Step #3: fix that or share your findings

droplpy · 2023-10-04 12:18:32

Firefox reports:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

Note that the only way for `fc-match` to return a result on '-apple-system' is by escaping the first dash

❯ fc-match '\-apple-system'
NotoSans-Regular.ttf: "Noto Sans" "Regular"
❯ fc-match BlinkMacSystemFont
NotoSans-Regular.ttf: "Noto Sans" "Regular"
❯ fc-match "Segoe UI"
Cantarell-VF.otf: "Cantarell" "Regular"
❯ fc-match Roboto
NotoSans-Regular.ttf: "Noto Sans" "Regular"
❯ fc-match "Helvetica Neue"
NotoSans-Regular.ttf: "Noto Sans" "Regular"
❯ fc-match Arial
NotoSans-Regular.ttf: "Noto Sans" "Regular"
❯ fc-match "Apple Color Emoji"
AppleColorEmoji.ttf: "Apple Color Emoji" "Regular"
❯ fc-match "Segoe UI Emoji"
AppleColorEmoji.ttf: "Apple Color Emoji" "Regular"
❯ fc-match "Segoe UI Symbol"
Cantarell-VF.otf: "Cantarell" "Regular"
❯ fc-match sans-serif
NotoSans-Regular.ttf: "Noto Sans" "Regular"

I would assume there's no reason for Firefox to replace spaces and numbers with a font that is so low on the list?

seth · 2023-10-04 12:25:24

The first font that actually gets properly resolved is

❯ fc-match "Apple Color Emoji"
AppleColorEmoji.ttf: "Apple Color Emoji" "Regular"

Everything else just returns the fallback that is not the requested font.

Try to install ttf-roboto or https://aur.archlinux.org/packages/ttf-ms-fonts

Edit: there's also https://aur.archlinux.org/packages/otf-helvetica-neue and you can oc. explicitly alias one of the desired fonts to an existing one (but be careful-ish to use one w/ the same metrics)

Last edited by seth (2023-10-04 12:30:29)

gcb · 2023-10-04 15:03:53

there's `noto-fonts-emoji` which is the most used color emoji font.

also make sure you have the `fontconfig` package installed, as it brings `/usr/share/fontconfig/conf.avail/45-generic.conf` which ties all the emoji/math symbols hack together. it names all emoji fonts as `family=emoji` and then the font system can match between them as available.

droplpy · 2023-10-04 15:41:45

seth wrote:

The first font that actually gets properly resolved is
❯ fc-match "Apple Color Emoji"
AppleColorEmoji.ttf: "Apple Color Emoji" "Regular"
Everything else just returns the fallback that is not the requested font.
Try to install ttf-roboto or https://aur.archlinux.org/packages/ttf-ms-fonts

This turns out to be the solution. fontconfig matching prefers an exact match and for some reason the default browser list of fonts includes "Apple Color Emoji" which is an exact match with the font I had. Solution is to make sure to have common fonts that the browser will prefer over the emoji font such as Arial, Roboto, etc.

Thanks for the help!

seth · 2023-10-04 16:12:36

\o/
Please always remember to mark resolved threads by editing your initial posts subject - so others will know that there's no task left, but maybe a solution to find.
Thanks.

Arch Linux

#1 2023-10-04 09:35:19

[RESOLVED] Firefox, other apps render numbers as emoji and wide spaces

#2 2023-10-04 11:56:13

Re: [RESOLVED] Firefox, other apps render numbers as emoji and wide spaces

#3 2023-10-04 12:18:32

Re: [RESOLVED] Firefox, other apps render numbers as emoji and wide spaces

#4 2023-10-04 12:25:24

Re: [RESOLVED] Firefox, other apps render numbers as emoji and wide spaces

#5 2023-10-04 15:03:53

Re: [RESOLVED] Firefox, other apps render numbers as emoji and wide spaces

#6 2023-10-04 15:41:45

Re: [RESOLVED] Firefox, other apps render numbers as emoji and wide spaces

#7 2023-10-04 16:12:36

Re: [RESOLVED] Firefox, other apps render numbers as emoji and wide spaces

Board footer