Website specifies emoji font in body tag


#1

Observed Behavior:
On your website secure.phabricator.com/, you have specified the font “Segoe UI Emoji” in the body tag as a fallback for “Segoe UI”. I have neither of these fonts installed, but in /etc/fonts/conf.d/ I redirect all emoji fonts that I don’t have to be displayed by EmojiOne, the emoji font I have installed. This makes your website look like this:

Expected Behavior:
Expected behaviour: Numbers instead of orange circles.

Please specify some nice linux fonts in your .body before specifying any emoji fonts.

Phabricator Version:
Not applicable

Reproduction Steps:

  1. Install EmojiOne
  2. Have something like this in /etc/fonts/conf.d/75-emojione.conf
    <match target="pattern">
        <test qual="any" name="family"><string>Segoe UI Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>EmojiOne</string></edit>
    </match>
  1. Visit secure.phabricator.com/ without Segoe UI or Segoe UI installed.

#2

This appears to be working exactly how you’ve configured it to work.


#3

Well, yes, in the sense that it uses the font I have installed as a fallback for uninstalled emoji fonts, it does what I configured it to do.

But the reason it is happening is:

body {
	font:13px 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Helvetica Neue',Helvetica,Arial,sans-serif;

Because an Emoji font is the first font it can find, it displays numbers as emoji instead of as numbers. I think this problem would happen for anybody without Segoe UI installed.

If it were specified like this instead then there’s a windows font, a linux font, and a mac font before it gets to the emoji fonts, ensuring that at least the basic ascii characters will be displayed as non emoji:

font:13px 'Segoe UI','Bitstream Vera Sans', 'Lucida Grande', 'Segoe UI Emoji','Segoe UI Symbol','Lato','Helvetica Neue',Helvetica,Arial,sans-serif;

(Note: I chose Bitstream Vera Sans and Lucida Grande because they are likely to be installed on most linux or mac systems but there are plenty of other fonts that could stand in for these here that would be just as nice.)


#4

I think this problem would happen for anybody without Segoe UI installed.

This only affects users who have explicitly configured their system to replace Segoe UI Emoji with a different font that has different properties.

Here’s how Phabricator renders on my system with Segoe UI installed:

Here’s how Phabricator renders on my system with Segoe UI uninstalled:


#5

I “uninstalled” it by removing “Segoe UI” from the body { ... } CSS class so some of the subheaders are technically still rendering with “Segoe UI”, but most of the page content has fallen back to “Segoe UI Emoji”.

Since “Segoe UI Emoji” does not define any latin characters, the content continues falling back through “Segoe UI Symbol”. That font doesn’t define any latin characters either, so it falls back again until it hits “Lato”, which is embedded on the page. The page renders in “Lato”.


#6

Thanks for engaging with me on this issue. I’ve thought about it some more and I think you’re right. Probably the problem is with EmojiOne for rendering ascii numerals as emoji in the first place. I’m using their default configuration file.

I tried editing my fontconfig to have “Segoe UI” fallback on something else that I do have but I haven’t got it to work yet.