1521352 - Google News shows text instead of icons (and looks pretty broken), if you disable the ability for web pages to specify their own fonts

Status: RESOLVED WONTFIX

(Web Compatibility :: Site Reports, defect, P3)

Description

[kendall.timothy]

Attachment: FIrefox-Google-News.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:64.0) Gecko/20100101 Firefox/64.0

Steps to reproduce:

Steps to reproduce: Simply start Firefox and try to visit https://news.google.com. No further "steps".

Actual results:

Words at the upper left of the page are displayed "on top of each other", making them illegible. See attached screenshot. Note that this problem does not arise in Safari (the only other browser I've tried it with). It has happened with Firefox every time I try to use that site for at least a couple of months now.

Expected results:

Words should be displayed normally and legibly.

Comment 1

[kendall.timothy]

The "User Agent" shown is incorrect. The version I'm using is MacOS 10.14.2 (Mojave). I don't know what Gecko/20100101 is. The Firefox release I'm running is 64.0.2.

Comment 2

[[:philipp]]

hi, please see if the steps from https://support.mozilla.org/en-US/kb/websites-look-wrong-or-appear-differently help in this case.

Comment 3

[kendall.timothy]

I was trying to respond to an email that gave me a non-solution to this problem, but the email was rejected.

There's nothing here that could reference the email I got, so I guess I'm at the end of the road and that there will be no fix.

Comment 4

[Matthias Versen [:Matti]]

Please try this: https://support.mozilla.org/en-US/kb/refresh-firefox-reset-add-ons-and-settings
The page looks ok for me using Firefox64.0.2 and with the Firefox 66 nightly developer version.

Comment 5

[u554753]

Per Comment 4, were you able to get Google News properly displayed on your browser?

Comment 6

[kendall.timothy]

It displays correctly in Safari, but not in Firefox Quantum 64.0.2. This has been going on for months.

Comment 7

[u554753]

Have you tried with a new/refreshed profile?

Comment 8

[kendall.timothy]

No. I gather that doing so essentially returns Firefox to "factory settings", i.e., virtually un-usable for one who has eye-strain problems because of all the glaring white background. I'm afraid I can't do that, because I do have eye-strain problems.

Which I suppose makes the garbled-text problem, which occurs reliably but only in one part of one window of one website, my fault. Sorry to have brought it up.

Comment 9

[u554753]

Can you paste your information from about:support so we can attempt to reliably reproduce this issue?

Comment 10

[Daniel Holbert [:dholbert]]

(about:support info would be super handy, but also/especially: what are the configuration changes that you've made to Firefox, to accommodate your eye-strain problems? It's perhaps likely that one of those configuration changes is involved in causing the problem here, and we'd be able to reproduce if we knew what knob to toggle.)

Comment 11

[Daniel Holbert [:dholbert]]

OK, I can reproduce the issue if I use Firefox DevTools to inspect the page, find an element with class=DPvwYc (e.g. one of the icons in the top left corner that are broken in the screenshot), and uncheck this CSS Declaration:

.DPvwYc {
font-family: 'Material Icons Extended';

It looks like Google is drawing those icons by rendering the text "star_border" with their font called "Material Icons Extended", and that font renders this string of text ("star_border") as a single star icon.

This is presumably done with the intention of improving accessibility (so e.g. screen reader software has a meaningful title for each icon), but it's not great if the font load is blocked.

Reporter: I'm guessing that you have a configuration icon that forces all text to be rendered in a particular font of your choice -- is that correct? (Maybe you've disabled the "Allow pages to choose their own fonts" checkbox in Firefox preferences?)

Given that configuration, Firefox is rendering the page faithfully as it is given to us. So, I don't think this is really a Firefox bug -- Google News is giving us this string of text to render, and we do dutifully render it (in the icon font by default, or in some other font if the user blocks that via e.g. this configuration option).

Comment 12

[Daniel Holbert [:dholbert]]

The easiest way to reproduce this is to uncheck this option:

Allow pages to choose their own fonts, instead of your selections above

...in the "Advanced" fonts dialog in Firefox preferences (which is under General | Language and appearance | Fonts & Colors -- or just type "font" into the preferences search box)

So for now, the solution here is to honor the page font (i.e. re-check that checkbox). Perhaps in the future we should have configuration option for "don't allow custom fonts, except for ones with 'Icon' in the name"... Without that, this sort of option is likely to break some fraction of the web, as it did here.

I'm going to leave this as "OPEN" for now, since this option does seem like a bit of a footgun without an "except icons fonts" escape hatch at the moment.

Comment 13

[Daniel Holbert [:dholbert]]

And I guess this is basically a special case of bug 1449964. (That bug's about emoji, and these icons might not technically be emoji, but it's the same basic scenario of icon fonts.)

Comment 14

[Daniel Holbert [:dholbert]]

Attachment: screenshot of same issue in chrome (when started with " --disable-remote-fonts")

I can reproduce the same issue in Chrome, too, if I use their roughly-equivalent toggle, which is a command-line option -- starting it like so:

google-chrome --disable-remote-fonts

Comment 15

[Daniel Holbert [:dholbert]]

So, while there's a chance we could address this with a heuristic as discussed in bug 1449964 comment 8 - 9, it seems iffy & highly imprecise.

Perhaps we should just consider this a tech evangelism issue and see if Google News can fix this somehow, for the benefit of users who run Chrome or Firefox with remote fonts disabled for readability's sake? (or other browsers, if they presumably support that option)

Comment 16

[Jonathan Kew [:jfkthame]]

(In reply to Daniel Holbert [:dholbert] from comment #14)

I can reproduce the same issue in Chrome, too, if I use their roughly-equivalent toggle, which is a command-line option -- starting it like so:

google-chrome --disable-remote-fonts

Just FTR, that sounds like it disables @font-face resources, but wouldn't affect the use of locally-installed fonts named in font-family; so it's closer to the Firefox setting gfx.downloadable_fonts.enabled (which is not exposed in Preferences, though, unlike browser.display.use_document_fonts).

Indeed, disabling @font-face resources altogether would break the icons even if they were using a PUA-encoded icon font, whereas that case generally works in Firefox when use_document_fonts is turned off.

Comment 17

[Daniel Holbert [:dholbert]]

I just sent an email to our Google contacts to report this to them, BTW.

Comment 18

[Daniel Holbert [:dholbert]]

Good news: we heard back from a Google contact that they're taking some steps to address this issue (or at least make it less-bad).

The change isn't published yet, but it sounds like it'll be out before too long.

Comment 19

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 20

[Jonathan Kew [:jfkthame]]

(In reply to Daniel Holbert [:dholbert] from comment #18)

Good news: we heard back from a Google contact that they're taking some steps to address this issue (or at least make it less-bad).

The change isn't published yet, but it sounds like it'll be out before too long.

FWIW, I just took another look at this, and the problem is still present.

Comment 22

[Daniel Holbert [:dholbert]]

Attachment: screenshot 2021-10-18 showing the bug still present

Yup, this is still an issue. Though it's changed or gotten a little bit better -- the original screenshot showed this breaking all the icons in the left sidebar, but now those ones all seem to work fine -- they're just inline SVG, rather than special text strings rendered with a special font.

But there are still a few icons on the page that are broken by this, as shown in this new screenshot that I'm attaching here. Specifically, I'm seeing these strings that are meant to be icons (when loading Google News with custom-fonts disabled in current Firefox Nightly with a fresh profile):
arrow_drop_down at right of searchbar
keyboard-arrow-up (rotated upside down) at the bottom of some autocollapsed news sections
my_location at top-right in weather section.

Comment 23

[Daniel Holbert [:dholbert]]

Attachment: screenshot of this issue affecting Google Translate

This bug affects https://translate.google.com, too. See attached screenshot, showing that site in a regular Firefox profile on top, vs. with Allow pages to choose their own fonts setting disabled on the bottom.

Three icons (at least) are expanded into weird placeholder-text under this configuration, due to this peculiar design pattern.

Comment 24

[Daniel Holbert [:dholbert]]

Attachment: screenshot of the issue affecting Chromium's bug tracker

This also affects Chromium's bug tracker. It particularly breaks the dropdown-menu widget at the left edge of their searchbox, shown at the top of this screenshot underlined in red. (That widget seems to have a hardcoded assumption about the dropdown arrow icon being pretty small; and unfortunately, if the icon font doesn't load, then the literal string arrow_drop_down ends up much wider than the site can handle.)

Comment 25

[Oana Arbuzov [:oanaarbuzov]]

The issue is still present if I disabled "Allow pages to choose their own fonts, instead of your selections above" option.
https://prnt.sc/kUfC0VmqnyvV

Tested with:
Browser / Version: Firefox Nightly 103.0a1 (2022-06-07)
Operating System: Windows 10 Pro

Comment 26

[Pierre Ossman]

Are we still hoping to convince Google to stop using ligatures or should this be considered a duplicate of the other bugs on this theme (e.g. bug 1363454)? It seems like Google is using this more now, not less.

Comment 27

[Raul Bucata]

The issue is still reproducible with the said option enabled as per comment25

Dennis, is this a valid webcompat bug since the settings of the browser are altered, or a Firefox Bug?

Tested with:

Browser / Version: Firefox Nightly 111.0a1 (2023-01-16) (64-bit)
Operating System: Windows 10 PRO x64

Comment 28

[Daniel Holbert [:dholbert]]

(In reply to Oana Arbuzov [:oanaarbuzov] from comment #25)

The issue is still present if I disabled "Allow pages to choose their own fonts, instead of your selections above" option.
https://prnt.sc/kUfC0VmqnyvV

True, though it's a bit better. At least on Google News, it looks like Google's using this font for icons substantially less than they used to -- I'm only seeing it for the dropdown arrow (arrow_drop_down) in the searchbox at the top, as shown in Oana's screenshot here.

I did run across several other Google sites whose usability is impacted, though:

• Chromium's bug tracker (per comment 24)
• Google Translate (not quite as bad as shown in comment 23 here or in bug 1363454 comment 8, but some of the brokenness is still there)
• Google Calendar (I don't know if that's been mentioned here or on dupes before, but I'll attach a screenshot to demonstrate)

I also see this at the https://cloud.google.com/ front page (search and keyboard_arrow_down) though it doesn't really affect usability there, as much as these other ones. Not sure if it affects the actual site if you've got a paid account there (I don't).

(In reply to Pierre Ossman from comment #26)

Are we still hoping to convince Google to stop using ligatures or should this be considered a duplicate of the other bugs on this theme (e.g. bug 1363454)? It seems like Google is using this more now, not less.

RE "using this more now" -- do you have examples of specific Google sites that are using this, particularly in ways that make them unusable, beyond the sites that I noted above? I tried a handful of other sites -- google.com search (including integrated weather/image search results), Gmail (and integrated chat), GDrive (docs, sheets, slides), GMaps, Keep -- and I didn't notice this affecting any of them.

(In reply to Raul Bucata from comment #27)

Dennis, is this a valid webcompat bug since the settings of the browser are altered, or a Firefox Bug?

Yes. :) It's a webcompat bug, and we could hypothetically mitigate it by changing how the feature works in Firefox, if we have to.

This is an uncommon browser setting, where the user is asking Firefox to reject web fonts, and Google happens to be using a web font to provide all of its icons here, in a way that falls back pretty badly if the font doesn't load (more details in comment 11). That's why it's classified as a webcompat bug; Google's making an unjustified assumption about resources loading, with fallback behavior that breaks usability in some cases.

To the extent that we might make changes to Firefox itself (i.e. "a Firefox Bug") to address/mitigate this, it'd be to make the change that was proposed in bug 1363454 (i.e. add some special cases to this feature, to allow through some webfonts even if the user has asked us not to).

I'll reach out to follow up on my email thread on the Mozilla/Google discussion list... Looks like our last update was a year and a half ago, and it sounded like some progress was being made at that point.

Comment 29

[Daniel Holbert [:dholbert]]

Attachment: screenshot as of Jan 2023, affecting Google Calendar, Google Translate, and Chromium's bug tracker

(In reply to Daniel Holbert [:dholbert] from comment #28)

I did run across several other Google sites whose usability is impacted, though:

• Chromium's bug tracker (per comment 24)
• Google Translate (not quite as bad as shown in bug 1363454 comment 8, but some of the brokenness is still there)
• Google Calendar (I don't know if that's been mentioned here or on dupes before, but I'll attach a screenshot to demonstrate)

Here's a screenshot showing these. Notably, Google Translate isn't as bad as it used to be -- the [Text][Documents] buttons near the top used to be horked as shown in attachment 9251029 [details], but those are fine now -- the icons there are now drawn using inline SVG elements.

Comment 30

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #28)

I'll reach out to follow up on my email thread on the Mozilla/Google discussion list... Looks like our last update was a year and a half ago, and it sounded like some progress was being made at that point.

(Email sent.)

Comment 31

[Pierre Ossman]

(In reply to Daniel Holbert [:dholbert] from comment #28)

(In reply to Pierre Ossman from comment #26)

Are we still hoping to convince Google to stop using ligatures or should this be considered a duplicate of the other bugs on this theme (e.g. bug 1363454)? It seems like Google is using this more now, not less.

RE "using this more now" -- do you have examples of specific Google sites that are using this, particularly in ways that make them unusable, beyond the sites that I noted above? I tried a handful of other sites -- google.com search (including integrated weather/image search results), Gmail (and integrated chat), GDrive (docs, sheets, slides), GMaps, Keep -- and I didn't notice this affecting any of them.

Two of the places where things have gotten worse were indeed Chromium's bug tracker and Google Calendar. There is also a third that is almost unusable: Google Timeline. It also used to have images and switched to this ligature hack.

There might be more. I haven't really kept a list. A quick check shows that Google Meet is also broken. As is the survery popup on (at least) Google Contacts.

Comment 32

[Pierre Ossman]

Google is also recommending this behaviour for others:

https://developers.google.com/fonts/docs/material_icons

(which also reveals the Google Fonts is also broken)

The current home of material design icons recommends against using the font method, though, but for different reasons:

https://pictogrammers.com/docs/guides/webfont-alternatives/

Comment 33

[Daniel Holbert [:dholbert]]

(In reply to Pierre Ossman from comment #32)

Google is also recommending this behaviour for others:
https://developers.google.com/fonts/docs/material_icons

Thanks, that's useful. I also found a recent blog post (from April 2022), announcing/promoting the launch of a brand new font that has this same issue, "Material Symbols": https://material.io/blog/introducing-symbols

(Material Symbols itself is at https://fonts.google.com/icons , and all of its icons on that page look broken due to this bug, in affected[1] firefox versions, if you have "Allow pages to choose their own fonts" turned off.)

So: given that Google folks are actively developing, announcing, and promoting new fonts with this issue, it seems they're not moving away from this practice after all. Hence, I don't think we'll take further outreach actions here; let's call this WebCompat bug "WontFix".

Fortunately, that's all right, since jfkthame landed a mitigation a few days ago in bug 1363454, using an allowlist of known ligature-icon-fonts. That patch is in current Firefox Nightly, though I noticed we're missing one font -- see bug 1813865 -- that's still needed for Google Translate, Timeline, and News to work. Once that's landed: if you notice any sites that are still broken due to this issue in Nightly versions (or beta/release once the fix has made it there), please file bugs (ideally as dependencies of bug 1363454) so we can add any other font names that were missed. And you should be able to address breakage locally by editing the about:config pref browser.display.use_document_fonts.icon_font_allowlist yourself.

Thanks to all for the assistance on understanding & tracking this issue over the years.

[1] "affected firefox versions" = e.g. Firefox nightlies up until a few days ago