Css specifies emoji fonts for body text

[Oreolek]

• Gitea version: 1.13.0
• Can you reproduce the bug at https://try.gitea.io:
  • Yes: https://try.gitea.io/explore/repos
  • No

Description

_base.less specifies the body and headings font family as:

-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Roboto,Helvetica,Arial, Apple Color Emoji,Segoe UI Emoji,Noto Color Emoji,Twemoji Mozilla, sans-serif

This looks fine on Chrome but I guess you didn't test on Firefox because Firefox prints all numbers as emoji. Everywhere. It's hideous.

Screenshots

Also see #12966 because that bug is about the same CSS line.

[techknowlogick]

I am using FF but am not seeing what you see in screenshots, could you confirm the operating system and version of FF you are using?

[Oreolek]

Linux, Firefox beta 84.0. It's fine on a Windows virtual machine.

I guess the Noto Color Emoji is the first font installed on my system (I have Arial and Roboto but they're not used for some reason, and they're custom-installed anyway.)

[itsdeadguy]

I'm seeing this as well, similar setup as @Oreolek

[silverwind]

Is it only numbers? I guess one could use CSS unicode-range to just exclude glyphs 1-9 thought I wonder if there are better solutions.

Also, this kind of smells like a Firefox bug, it should prefer the sans-serif fonts if they are installed.

[silverwind]

Can someone test if putting sans-serif before the emoji fonts solves this?

[itsdeadguy]

@silverwind that works but it's not the proper way to define a font stack and might break something else down the line, possibly
edit: forgot to say that yes, it's only the numbers

[silverwind]

What do you suggest? We can't really wrap all emoji in their own elements after all.

[itsdeadguy]

are they being used elsewhere? this is honestly the first time i noticed them. all other icons i've seen on the web interface seem to come from an icon font (like fontawesome or some such) and are contained in elements

[silverwind]

Emoji can of course appear anywhere where there is user content and we might even use them at some point in our own templates. I think it's unavoidable to have those fonts in the font stack.

[silverwind]

Please try #13834.