Fonts not displaying properly on certain sites
Over the last week or so I've encountered several websites where the fonts aren't rendering properly. (Sample image attached.)
Anyone know why?
All Replies (5)
Is this about a specific font ?
You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected.
You can check in the Rules tab in the right panel in the Inspector what font-family is used for selected text.
You can check in the Font tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website.
You can try to disable hardware acceleration in Firefox.
- Options/Preferences -> General: Performance
remove checkmark: [ ] "Use recommended performance settings"
remove checkmark: [ ] "Use hardware acceleration when available" - https://support.mozilla.org/en-US/kb/performance-settings
Close and restart Firefox after modifying the setting for changes to take effect.
You can check if there is an update for your graphics display driver and check for hardware acceleration related issues.
Very helpful reply, thank you Cor-el!
I have determined that it's just one font: Raleway.
I haven't fixed the problem yet, but I'll keep trying. In the meantime, at least I know it's only one font being affected.
I've been having a similar problem. The font that seems to be causing the problem is "Twemoji Mozilla" in the variable font.name-list.emoji and the text is a little factoid about the site (it's the Babbidge Library at University of Connecticut). The text should read "
Babbidge Bog?: DYK the Babbidge Library sits on a pre-glacial bog that is nearly 40,000 years old according to radiocarbon dating?
"
Modified
Hi swampyankee
Twemoji Mozilla is a font for displaying emoticons as you can see by the pref name and should only be used for that case and shouldn't be used to display text, so you will have to check why Firefox is using this font instead of a normal font.
Some older unresolved threads about similar issues with this emoji font.
- /questions/1294803 Firefox Not Displaying Characters Correctly
- /questions/1247403 All my icons are completely garbled, and there is no sound.
- /questions/1236309 When I open a new tab, no inscriptions can be read, as they are shown in strange characters
The only way I can think of is to use the Inspector to see if you can find out in what cases Firefox tries to use this font. You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected and then go up in the DOM tree to see what font settings are specified for these cases.
Thanks for the information.
It seems that font.name-list.emoji is being invoked by italic text or underlined text in in a different color. This isn't unique to the UConn Library site; I see the same thing on other sites, including wikipedia. I've tried changing the value for font.name-list.emoji to "Noto Color Emoji."
This is incredibly annoying.
(added in edit)
When I inspected the element, the "fonts" tab in the window on the had a toggle labeled "italic"; when I toggled it the font name changed from the emoji font to Deja Vu Sans.
Modified