Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Emojis blurry in Firefox compared to Edge on Windows11

more options

I've found a solution to the blurriness of the emojis, I've put it in the end of this post, in bold ⤵⤵⤵

My problem is that emojis look bad on Firefox compared to Edge_128.0.2739.79. Two screenshots are attached of bing.com & a Google Doc (left half of both pictures is Edge, other half Firefox). The problem persists on all the sites to a varying degree.

Steps to replicate: A] Open 2 sites in latest Edge & Firefox on Windows 11 (the examples that I've used in the screenshots): https://www.bing.com/ and an Empty Google Doc. B] In the search field of bing and in a new line in an empty Google Doc, copy the following example emojis (That were inserted using the 'Windows_Key+V' which summons the emoji Keyboard of Windows): 🏀🚕 C] Compare the quality of the emojis rendering between the browsers when unzoomed and when zooming.

I've tried in FF (to no avail): A] Disable hardware acceleration in settings (w/ FF restart). B] Setting "gfx.font_rendering.cleartype_params.rendering_mode" from -5 to 5 (w/ 10+ FF restarts). C] Setting "gfx.webrender.quality.force-subpixel-aa-where-possible" to true (w/ FF restart). D] Using both emoji sets in the "Segoe UI Emoji" & "Twemoji Mozilla" fonts in the "font.name-list.emoji" setting, both sets gave me blurry results (w/ FF restarts). D] Disabling all add-ons (w/ FF restart). E] Setting new Firefox separate clean install. F*] In Windows setting the scaling factor to 100% in Windows->System->Display->Scaling_Factor (w/ FF & Windows restart).

How can the blurriness of the emojis be fixed so to make them crystal sharp like in Edge?

Solution: A} Download Noto-Color-Emoji font from https://fonts.google.com/noto/specimen/Noto+Color+Emoji Ensure that your are getting the full resolution font (which came at ~23MB as of 2024.09.23) B} Unpack the font and install according to the on screen instructions. C} In FF in "about:config" find the "font.name-list.emoji" setting and rewrite its value field to "Noto Color Emoji, Segoe UI Emoji, Twemoji Mozilla" (w/o the quotations marks). D} I've attached a screenshot w/ the result, It is marked w/ the red writing of font.name-list.emoji on it.

'''I've found a solution to the blurriness of the emojis, I've put it in the end of this post, in bold ⤵⤵⤵''' My problem is that '''emojis look bad on Firefox compared to Edge'''_128.0.2739.79. Two screenshots are attached of bing.com & a Google Doc (left half of both pictures is Edge, other half Firefox). The problem persists on all the sites to a varying degree. '''Steps to replicate:''' A] Open 2 sites in latest Edge & Firefox on Windows 11 (the examples that I've used in the screenshots): https://www.bing.com/ and an Empty Google Doc. B] In the search field of bing and in a new line in an empty Google Doc, copy the following example emojis (That were inserted using the 'Windows_Key+V' which summons the emoji Keyboard of Windows): 🏀🚕 C] Compare the quality of the emojis rendering between the browsers when unzoomed and when zooming. '''I've tried in FF (to no avail):''' A] Disable hardware acceleration in settings (w/ FF restart). B] Setting "gfx.font_rendering.cleartype_params.rendering_mode" from -5 to 5 (w/ 10+ FF restarts). C] Setting "gfx.webrender.quality.force-subpixel-aa-where-possible" to true (w/ FF restart). D] Using both emoji sets in the "Segoe UI Emoji" & "Twemoji Mozilla" fonts in the "font.name-list.emoji" setting, both sets gave me blurry results (w/ FF restarts). D] Disabling all add-ons (w/ FF restart). E] Setting new Firefox separate clean install. F*] In Windows setting the scaling factor to 100% in Windows->System->Display->Scaling_Factor (w/ FF & Windows restart). How can the blurriness of the emojis be fixed so to make them crystal sharp like in Edge? '''Solution:''' '''A} Download Noto-Color-Emoji font from https://fonts.google.com/noto/specimen/Noto+Color+Emoji''' '''Ensure that your are getting the full resolution font (which came at ~23MB as of 2024.09.23)''' '''B} Unpack the font and install according to the on screen instructions.''' '''C} In FF in "about:config" find the "font.name-list.emoji" setting and rewrite its value field to "Noto Color Emoji, Segoe UI Emoji, Twemoji Mozilla" (w/o the quotations marks).''' '''D} I've attached a screenshot w/ the result, It is marked w/ the red writing of font.name-list.emoji on it.'''
Attached screenshots

Modified by truebelieff

Chosen solution

Solution: A} Download Noto-Color-Emoji font from https://fonts.google.com/noto/specimen/Noto+Color+Emoji Ensure that your are getting the full resolution font (which came at ~23MB as of 2024.09.23) B} Unpack the font and install according to the on screen instructions. C} In FF in "about:config" find the "font.name-list.emoji" setting and rewrite its value field to "Noto Color Emoji, Segoe UI Emoji, Twemoji Mozilla" (w/o the quotations marks). D} I've attached a screenshot w/ the result, It is marked w/ the red writing of font.name-list.emoji on it.

Read this answer in context 👍 0

All Replies (3)

more options

Steps to replicate? Emoji are from where?

Helpful?

more options

Steps to replicate: A] Open 2 sites in latest Edge & Firefox on Windows 11 (the examples that I've used in the screenshots): https://www.bing.com/ and an Empty Google Doc. B] In the search field of bing and in a new line in an empty Google Doc, copy the following example emojis (That were inserted using the 'Windows_Key+V' which summons the emoji Keyboard of Windows): 🏀🚕 C] Compare the quality of the emojis rendering between the browsers when unzoomed and when zooming.

Notes:

  • In Firefox I've tried using both emoji sets in the "Segoe UI Emoji" & "Twemoji Mozilla" fonts in the "font.name-list.emoji" setting, both sets gave me blurry results.
  • As far as I know all of the emojis I've tried look much better on edge (not just the 2 I've pasted above).
  • The problem persists on all the sites to a varying degree.
  • Also forgot to mention that I've tried to set the scaling factor to 100% in Windows->System->Display->Scaling_Factor and that didn't improve the emoji-rendering-quality in Firefox at all.

Modified by truebelieff

Helpful?

more options

Chosen Solution

Solution: A} Download Noto-Color-Emoji font from https://fonts.google.com/noto/specimen/Noto+Color+Emoji Ensure that your are getting the full resolution font (which came at ~23MB as of 2024.09.23) B} Unpack the font and install according to the on screen instructions. C} In FF in "about:config" find the "font.name-list.emoji" setting and rewrite its value field to "Noto Color Emoji, Segoe UI Emoji, Twemoji Mozilla" (w/o the quotations marks). D} I've attached a screenshot w/ the result, It is marked w/ the red writing of font.name-list.emoji on it.

Modified by truebelieff

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.