Emojis aren't working in firefox?

Pastah · 2018-12-25 15:25:10

I think emojis aren't being rendered properly for me in firefox.

Here's an example:
https://www.reddit.com/r/archlinux/comm … rt/d7l05nt
https://i.imgur.com/IxVQjjY.png

I followed these instructions:
https://www.reddit.com/r/archlinux/comm … or_emojis/

Why are emojis rendering in my firefox address bar but not on the web page?

Last edited by Pastah (2018-12-25 15:39:15)

seth · 2018-12-25 15:38:53

Please replace the oversized (>200x200) image w/ a link.
Looks like it's just using a different font, so i'd first inspect the DOM css using the built in webinspector to see what font is resolved from css, then check its glyph resolution on the local system

DISPLAY=:0 FC_DEBUG=4 pango-view --font="<font name here>" -t <emoji here> | grep family

Pastah · 2018-12-25 15:43:48

seth wrote:

Please replace the oversized (>200x200) image w/ a link.
Looks like it's just using a different font, so i'd first inspect the DOM css using the built in webinspector to see what font is resolved from css, then check its glyph resolution on the local system
DISPLAY=:0 FC_DEBUG=4 pango-view --font="<font name here>" -t <emoji here> | grep family

It says the computed font family is: Noto Sans, Helvetica Neue, Segoe UI, Helvetica, Verdana, Arial, sans-serif

[dj@archy ~]$ DISPLAY=:0 FC_DEBUG=4 pango-view --font="Noto Sans" -t ? | grep family
Gives:
https://i.imgur.com/TGGGkts.png

Last edited by Pastah (2018-12-25 15:44:35)

seth · 2018-12-25 16:27:48

What happens if you try any other font down the road? (Helvetica Neue, Segoe UI, Helvetica, Verdana, Arial, sans-serif)

Pastah · 2018-12-25 16:51:01

seth wrote:

What happens if you try any other font down the road? (Helvetica Neue, Segoe UI, Helvetica, Verdana, Arial, sans-serif)

Shows the same emoji.

I think the unrendered emojis are coming from DejaVu Sans, though I don't know why. And when I do:
DISPLAY=:0 FC_DEBUG=4 pango-view --font="DejaVu Sans" -t ? | grep family
I get the same emoji in the output window.

EDIT:
Adding this to the conf I made from the instructions fixes the issue but I'm worried I'm messing up my system and making Dejavu Sans never used.

    <match target="pattern">
        <test qual="any" name="family"><string>Dejavu Sans</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

Last edited by Pastah (2018-12-25 17:04:15)

seth · 2018-12-25 17:17:42

Does

fc-match sans-serif

resolve dejavu sans?

Pastah · 2018-12-25 17:32:14

seth wrote:

Does
fc-match sans-serif
resolve dejavu sans?

[root@archy fonts]$ fc-match sans-serif
DejaVuSans.ttf: "DejaVu Sans" "Book"

If I don't use the edit for DejaVu Sans.

Last edited by Pastah (2018-12-25 17:32:39)

seth · 2018-12-25 17:52:06

What if you redirect it to noto sans?
~/.config/fontconfig/conf.d/99-sans.conf

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

Pastah · 2018-12-25 18:11:22

seth wrote:

What if you redirect it to noto sans?
~/.config/fontconfig/conf.d/99-sans.conf

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

Didn't work for me, here's my 75-noto-color-emoji.conf.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

    <!-- Add generic family. -->
    <match target="pattern">
        <test qual="any" name="family"><string>emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <!-- This adds Noto Color Emoji as a final fallback font for the default font families. -->
    <!-- 
    <match target="pattern">
        <test name="family"><string>sans</string></test>
        <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test name="family"><string>serif</string></test>
        <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test name="family"><string>sans-serif</string></test>
        <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
    </match>
    -->

    <match target="pattern">
        <test name="family"><string>monospace</string></test>
        <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>EmojiOne</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>EmojiOne Color</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <alias>
        <family>sans-serif</family>
        <prefer><family>Noto Sans</family></prefer>
    </alias>

    <!-- Block Symbola from the list of fallback fonts. -->
    <selectfont>
        <rejectfont>
            <pattern>
                <patelt name="family">
                    <string>Symbola</string>
                </patelt>
            </pattern>
        </rejectfont>
    </selectfont>

    <!-- Use Noto Color Emoji when other popular fonts are being specifically requested. -->
    <match target="pattern">
        <test qual="any" name="family"><string>Apple Color Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Segoe UI Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Segoe UI Symbol</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Android Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Twitter Color Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Twemoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Twemoji Mozilla</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>TwemojiMozilla</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>EmojiTwo</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Emoji Two</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>EmojiSymbols</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Symbola</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <!--
    <match target="pattern">
        <test qual="any" name="family"><string>Sans</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>
    -->

</fontconfig>

It still shows
[root@archy fonts]$ fc-match sans-serif
DejaVuSans.ttf: "DejaVu Sans" "Book"

EDIT:
I used your file as you suggested and put it under my user dj and it changed.
[dj@archy conf.d]$ fc-match sans-serif
NotoSans-Regular.ttf: "Noto Sans" "Regular"

I don't know why this doesn't work for the other file though.

Last edited by Pastah (2018-12-25 18:16:21)

seth · 2018-12-25 19:26:33

Config file order, the file in /etc/fonts/conf.d/ is still dominated by something else.
The more interesting question is of course, whether that had any impact on firefox (ensure to kill all FF processes and start a new one)

Pastah · 2018-12-25 19:50:44

seth wrote:

Config file order, the file in /etc/fonts/conf.d/ is still dominated by something else.
The more interesting question is of course, whether that had any impact on firefox (ensure to kill all FF processes and start a new one)

It didn't have any impact on firefox sadly.

[dj@archy conf.d]$ sudo fc-match sans-serif
DejaVuSans.ttf: "DejaVu Sans" "Book"
[dj@archy conf.d]$ fc-match sans-serif
NotoSans-Regular.ttf: "Noto Sans" "Regular"

Arch Linux

#1 2018-12-25 15:25:10

Emojis aren't working in firefox?

#2 2018-12-25 15:38:53

Re: Emojis aren't working in firefox?

#3 2018-12-25 15:43:48

Re: Emojis aren't working in firefox?

#4 2018-12-25 16:27:48

Re: Emojis aren't working in firefox?

#5 2018-12-25 16:51:01

Re: Emojis aren't working in firefox?

#6 2018-12-25 17:17:42

Re: Emojis aren't working in firefox?

#7 2018-12-25 17:32:14

Re: Emojis aren't working in firefox?

#8 2018-12-25 17:52:06

Re: Emojis aren't working in firefox?

#9 2018-12-25 18:11:22

Re: Emojis aren't working in firefox?

#10 2018-12-25 19:26:33

Re: Emojis aren't working in firefox?

#11 2018-12-25 19:50:44

Re: Emojis aren't working in firefox?

Board footer