Console warning with Dashicons font and input type="radio"

[aduth]

Previous Slack conversations:

• ​https://wordpress.slack.com/archives/C02QB2JS7/p1557297423309300
• ​https://wordpress.slack.com/archives/C02RQBWTW/p1557323743348700

Possibly related to (introduced by?): r44940 (#41074)

As of WordPress 5.2, viewing any admin page where a checked radio button is present will display a warning in the developer tools console:

Failed to decode downloaded font: http://editor.test/wp-includes/fonts/dashicons.eot?50db0456fde2a241f005968eede3f987
OTS parsing error: invalid version tag

Steps to reproduce:

1. Open your browser's developer tools console
2. Navigate to /wp-admin/export.php
3. Observe warning in console

Additional debugging information from @talldanwp:

I’ve narrowed it down to being triggered by radio inputs. They use a pseudo-element to display the filled circle when checked:

​https://github.com/WordPress/wordpress-develop/blob/master/src/wp-admin/css/forms.css#L141
My current thinking is that the warning is being shown because of content: "\2022";. The pseudo-element is inheriting dashicons as the font family, but ‘\2022’ isn’t a valid dashicons code point. This is reproducible in wp-admin and within Gutenberg (post visibility in Gutenberg, screen options on the posts screen in wp-admin).

It doesn’t actually seem to cause any problems in the UI. I’m not entirely sure why this is all of a sudden an issue, either. The CSS has been unchanged for 4-5 years.

[aduth]

As noted by @afercia ​in Slack, the warning occurs only in Google Chrome (in my case, v74.0.3729.131).

[afercia]

I see two possible reasons for this (Chrome-only) warning:

• remove the query parameter from the .eot file in the first @font-face ruleset in the dashicon CSS and the warning goes away
• as said above, \2022 is not a glyph in the dashicons font, it's just the "bullet" unicode character so the checked radio buttons shouldn't use the dashicon font-family in the first place, see https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/forms.css?rev=44895&marks=128#L121 (this seems to be a long standing incorrect property value)

Granted, when a browser doesn't find a font-family, it should fallback to the one used on the ancestors and ultimately to the OS/browser default, so the query param might play a role anyways.

[aduth]

Related Dashicons pull request which appears to be a remedy for this warning:

​https://github.com/WordPress/dashicons/pull/360

47183.patch​ can serve for testing. There may be additional changes pending a response to ​my comment about unexpected file changes.

[superpoincare]

I have seen some tickets which remove stylesheets for IE8 and below since it's no longer supported.

eot files are for ie8 and below. So we could remove any reference to it altogether.

The patch still has a reference to the eot file.

[timph]

I ran into this on the frontend of a site when logged in as admin. I didn't check other roles, but probably still the same result if the wpadminbar is displayed. I don't have any radio buttons as far as I can tell anywhere. Maybe this is just because of the search icon on the input field though? Not sure.

I tried a fresh install using twenty-nineteen, and ​https://github.com/WPTRT/theme-unit-test imported:

As a note, it's pretty wacky that it that this gets triggered on resize too, which is seen above in ss with the 100 warnings in console.

Browser: Chrome Version 70.0.3538.77 (Official Build) (64-bit)
OS: Ubuntu 18.04.2 LTS

Just deleting the line locally in sources tab fixed it, and I applied 47183.patch​ to the test install and no longer am receiving the warnings.

I agree with @superpoincare though that we should not be enablers for old IE versions and remove the .eot references and file for dashicons completely. Many themes also enqueue dashicons on the frontend for icons used inside the theme, so I'd assume the same would apply for non-logged in users in those situations. It reduces bundle size, and prevents this situation from happening again, so seems like a win/win kind of scenario.

[desrosj]

47183.patch​ looks good to me. This was merged upstream in the PR @aduth mentioned.

I worked with @ianbelanger on some IE testing. EOT format is not just for IE 8 and below. It is actually ​supported through IE 11 (which Core still supports). In our testing, we also found that IE 11 defaults to using the EOT format.

If we were to remove EOT from Dashicons, this would need to be discussed and happen upstream in the ​GitHub repository. Even then, the EOT file would need to persist in Core for some time for backwards compatibility.

[desrosj]

In 45310:

Administration: Remove duplicate font-face declaration in Dashicons CSS.

This was causing console warnings in some browsers.

Props aduth, joen, afercia, timph, ianbelanger.
Fixes #47183.

[desrosj]

Reopening for backport consideration.

[superpoincare]

@desrosj

IE 11 supports woff but it chooses eot because of the syntax. Ideally the syntax should be written so that IE 11 chooses woff over eot as woff is considered an upgrade to eot.

Zach Leat here says the syntax should have woff2 and woff only:

​https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/

He also argues that data-uri is anti-pattern and hence we should use woff2 and woff files, not base64 encodes in css:

​https://www.zachleat.com/web/web-font-data-uris/

[desrosj]

@superpoincare I am not against the idea. Sorry if my last comment came across that way. However, that change is outside the scope of this ticket. The goal here is to fix the console warning caused by the duplicate font-face.

Also, as I mentioned, the ​Dashicons font is maintained in GitHub. That is the correct place to propose a change like this as the build process and files in that repository will need to be updated with any changes before they can be introduced to Core.

Additionally, this is a change that should probably be included in a major release and accompanied by a note in the release documentation so that developers managing sites that require support for older browsers are able to adjust accordingly.

I recommend opening an issue on the Dashicons repository detailing your proposal to drop EOT with some research and reasoning so it can be properly evaluated.

[superpoincare]

@desrosj

That makes perfect sense. True, the present goal is to get rid of the error message. Will open an issue at Github.

[desrosj]

In 45312:

Administration: Remove duplicate font-face declaration in Dashicons CSS.

This was causing console warnings in some browsers.

Merges [45310] to the 5.2 branch.

Props aduth, joen, afercia, timph, ianbelanger.
Fixes #47183.