You are not logged in.

Pages: 1

#1 2022-05-04 08:41:13

rin
Member
Registered: 2013-12-24
Posts: 31

[solved] Wide font rendering on firefox and other apps

On certain web pages on firefox (v99 and v100), spaces are really wide and numbers are also rendered as if they are emoji.

Arch forums: https://i.imgur.com/QCduADL.png
With dev tools: https://i.imgur.com/6kbuZBy.png
Another website with dev tools: https://i.imgur.com/LS8iiGs.png
Doesn't happen on reddit: https://i.imgur.com/TH0Zdae.png
Reddit with dev tools: https://i.imgur.com/FaCIbb0.png

This started happening around 2 weeks ago. I've found a couple of other reports of people experiencing the same problem.
https://www.reddit.com/r/firefox/commen … d_numbers/
https://support.mozilla.org/no/questions/1373348

It seems to be related to the Noto Color Emoji font. Also, it's not just firefox, when I run rofi the numbers in the top right are also emoji. It doesn't happen in chromium.

~/.config/fontconfig/fonts.conf

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

 <alias>
 <!-- Change the string in the family tag to whatever font -->
    <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>Noto Mono</family></prefer>
  </alias>

   <!-- This adds Noto Color Emoji to the font families sans, serif, sans-serif and monospace -->
  <match target="pattern">
        <test name="family"><string>monospace</string></test>
        <edit name="family" mode="append" binding="same"><string>Noto Color Emoji</string></edit>
  </match>
  <match target="pattern">
        <test name="family"><string>sans</string></test>
        <edit name="family" mode="append" binding="same"><string>Noto Color Emoji</string></edit>
  </match>

  <match target="pattern">
        <test name="family"><string>serif</string></test>
        <edit name="family" mode="append" binding="same"><string>Noto Color Emoji</string></edit>
  </match>
  <!-- Discord loads the system's sans-serif font family, add Noto Color Emoji to it -->
  <match target="pattern">
        <test name="family"><string>sans-serif</string></test>
        <edit name="family" mode="append" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

   <!-- Add emoji generic family -->
  <alias binding="strong">
    <family>emoji</family>
    <default><family>Noto Color Emoji</family></default>
  </alias>

  <!-- Alias requests for the other emoji fonts -->
  <alias binding="strong">
    <family>Apple Color Emoji</family>
    <prefer><family>Noto Color Emoji</family></prefer>
    <default><family>emoji</family></default>
  </alias>
  <alias binding="strong">
    <family>Segoe UI Emoji</family>
    <prefer><family>Noto Color Emoji</family></prefer>
    <default><family>emoji</family></default>
</alias>

</fontconfig>

Help and ideas appreciated, thanks in advance.

EDIT: seem to have fixed it
Removed  binding="same" from the Noto Color Emoji parts of fonts.conf, installed aur/ttf-windows and ran fc-cache -frv

Last edited by rin (2022-05-04 09:54:58)

Offline

#2 2022-05-04 09:10:41

rin
Member
Registered: 2013-12-24
Posts: 31

Re: [solved] Wide font rendering on firefox and other apps

$ fc-match sans
NotoColorEmoji.ttf: "Noto Color Emoji" "Regular"

This doesn't seem right at all.

Offline

#3 2022-05-05 07:48:31

bjo
Member
Registered: 2011-09-10
Posts: 94

Re: [solved] Wide font rendering on firefox and other apps

rin wrote:

On certain web pages on firefox (v99 and v100), spaces are really wide and numbers are also rendered as if they are emoji.

Arch forums: https://i.imgur.com/QCduADL.png
With dev tools: https://i.imgur.com/6kbuZBy.png
Another website with dev tools: https://i.imgur.com/LS8iiGs.png
Doesn't happen on reddit: https://i.imgur.com/TH0Zdae.png
Reddit with dev tools: https://i.imgur.com/FaCIbb0.png

This started happening around 2 weeks ago. I've found a couple of other reports of people experiencing the same problem.
https://www.reddit.com/r/firefox/commen … d_numbers/
https://support.mozilla.org/no/questions/1373348

It seems to be related to the Noto Color Emoji font. Also, it's not just firefox, when I run rofi the numbers in the top right are also emoji. It doesn't happen in chromium.

~/.config/fontconfig/fonts.conf

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

 <alias>
 <!-- Change the string in the family tag to whatever font -->
    <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>Noto Mono</family></prefer>
  </alias>

   <!-- This adds Noto Color Emoji to the font families sans, serif, sans-serif and monospace -->
  <match target="pattern">
        <test name="family"><string>monospace</string></test>
        <edit name="family" mode="append" binding="same"><string>Noto Color Emoji</string></edit>
  </match>
  <match target="pattern">
        <test name="family"><string>sans</string></test>
        <edit name="family" mode="append" binding="same"><string>Noto Color Emoji</string></edit>
  </match>

  <match target="pattern">
        <test name="family"><string>serif</string></test>
        <edit name="family" mode="append" binding="same"><string>Noto Color Emoji</string></edit>
  </match>
  <!-- Discord loads the system's sans-serif font family, add Noto Color Emoji to it -->
  <match target="pattern">
        <test name="family"><string>sans-serif</string></test>
        <edit name="family" mode="append" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

   <!-- Add emoji generic family -->
  <alias binding="strong">
    <family>emoji</family>
    <default><family>Noto Color Emoji</family></default>
  </alias>

  <!-- Alias requests for the other emoji fonts -->
  <alias binding="strong">
    <family>Apple Color Emoji</family>
    <prefer><family>Noto Color Emoji</family></prefer>
    <default><family>emoji</family></default>
  </alias>
  <alias binding="strong">
    <family>Segoe UI Emoji</family>
    <prefer><family>Noto Color Emoji</family></prefer>
    <default><family>emoji</family></default>
</alias>

</fontconfig>

Help and ideas appreciated, thanks in advance.

EDIT: seem to have fixed it
Removed  binding="same" from the Noto Color Emoji parts of fonts.conf, installed aur/ttf-windows and ran fc-cache -frv

I'm wondering why this is considered as solved. It seems to be an upstream issue?

Offline

#4 2022-05-05 08:48:31

arojas
Developer
From: Spain
Registered: 2011-10-09
Posts: 2,295

Re: [solved] Wide font rendering on firefox and other apps

bjo wrote:

I'm wondering why this is considered as solved. It seems to be an upstream issue?

There's no issue, this is caused by a bogus fontconfig snippet.

Offline

#5 2022-05-05 08:51:22

bjo
Member
Registered: 2011-09-10
Posts: 94

Re: [solved] Wide font rendering on firefox and other apps

I don't have any fontconfig snippet, used "Noto Sans" as default font and got also strange renderings:

preview

That should be "Postfix" in Thunderbirds titlebar.

Last edited by bjo (2022-05-05 09:01:49)

Offline

#6 2022-05-05 10:28:41

arojas
Developer
From: Spain
Registered: 2011-10-09
Posts: 2,295

Re: [solved] Wide font rendering on firefox and other apps

This is about some characters being incorrectly rendered as emoji inside firefox, your issue is unrelated.

Offline

Pages: 1

Board footer

Powered by FluxBB