www.reddit.com - Emojis default to system font rather than font configured in about:config
Categories
(Web Compatibility :: Site Reports, defect, P2)
Tracking
(Webcompat Priority:P2, Webcompat Score:5)
People
(Reporter: rbucata, Unassigned)
References
()
Details
(Keywords: webcompat:needs-diagnosis, webcompat:site-report, Whiteboard: [webcompat-source:web-bugs][webcompat:sightline])
User Story
platform:windows impact:content-missing configuration:common affects:all branch:release diagnosis-team:layout user-impact-score:110
Environment:
Operating system: Windows 10
Firefox version: Firefox 136.0
Steps to reproduce:
The default emoji font set on Windows 10 is missing proper icons for some emoji. I installed the Noto Color Emoji font pack (https://fonts.google.com/noto/specimen/Noto+Color+Emoji) and then configured it as the default emoji font in about:config (font.name-list.emoji is "Noto Color Emoji, Twemoji Mozilla, Segoe UI Emoji"). For whatever reason this does not seem to work consistently however. In most places the correct font is used, however on Reddit the system font is always used (except in the page title that shows on its tab, which uses the correct emoji font). In Google searches the emoji shows inconsistently, most of the time it uses the correct font, however in lists of repeated search results that all contain the emoji it seems to revert to one of the other fonts in font.name-list.emoji. This overall results in a very ugly emoji display.
On my PC Chrome displays the same emojis on Reddit, however it is also just using the default system emoji font. On Android using Firefox and using desktop site Reddit displays emojis that match the system fontset as expected. Based on the page CSS my speculation is that because the page specifies var(--sans-serif) as the font family and Segoe UI is the default sans-serif font the entire text is rendered using that font and as Segoe UI has an emoji set those emojis get used instead of correctly picking the configured emoji font.
Actual Behavior:
Emojis default to system font rather than font configured in about:config
Notes:
- Reproduces regardless of the status of ETP
- Reproduces in firefox-nightly, and firefox-release
- Does not reproduce in chrome
Created from https://github.com/webcompat/web-bugs/issues/150189
|
Reporter | |
Comment 1•5 days ago
|
||
The QA team does not really have the knowledge to implement this, but since the issue is on reddit.com, we thought that this might be something worth investigating, if someone can perform the proper set-up. If needed, QA can perform the font set-up, if steps are provided.
|
||
Updated•5 days ago
|
|
||
Updated•5 days ago
|
|
||
Updated•5 days ago
|
|
||
Comment 2•5 days ago
|
||
This isn't emojis "defaulting" to the wrong font, it's the web page explicitly choosing an emoji font. Inspecting the reddit search page from the URL field, I see the computed value of font-family is:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif
which means the emoji fonts that it specifically names will take precedence (if present -- so on Windows, that'll be Segoe UI Emoji) over fallbacks from the font.name-list.emoji pref.
So it sounds like this is working as expected.
|
||
Comment 3•4 days ago
|
||
I think we can close this as invalid, given comment 2. This was a case of user misunderstanding (and a website being extra specific about requiring a particular emoji font) rather than an implementation bug in Firefox.
(As I understand it, there's also no actual difference with Chrome here, despite the last line in comment 0 - I'm pretty sure that was a typo/mistake.)
Description
•