Downloadable font: rejected by sanitizer

[TCL735]

The console is spitting out errors regarding the "icomoon" font. Previously this was reported as #1673 - but the issue remains unresolved.

[TCL735]

One possible lead to explore is the pathing for font assets, as explained here: https://www.seanmcp.com/articles/fix-downloadable-font-rejected-by-sanitizer-error-in-firefox/

[hoorayimhelping]

I saw this error in chrome:

OTS parsing error: invalid version tag

maybe doing a couple of searches and cross referencing the results is the way to go?

[ChitlangeSahas]

We tried removing .eot and .ttf files, that does not seem to fix it. To see this error, hard refresh the browser, go to the network tab and find any .woff or .woff2 files. And then click on them to see the response, you'll notice more 404-s thrown in the console.

[TCL735]

Crazy idea: what if we deleted all references to 'icomoon' in the UI repository? Since 'icomoon' is already (and should be) handled by Clockface, why is it necessary to reference 'icomoon' directly in the UI repository stylesheets? Perhaps this error is from the 3 stray references to 'icomoon'? Which appear to do nothing or add very little to styling for components that will no longer be used.

[TCL735]

To remove all references of 'icomoon', we need to:

• delete TableGraphs.scss - currently in use as the fallback when feature flag useGiraffeGraphs is turned off. As a workaround, change "icomoon" to $cf-text-font temporarily.
• delete the $ix-icon-font variable in variables.scss
• remove CustomSingularTime.scss which appears to be an unused stylsheet

[TCL735]

Didn't work. Still getting the sanitizer error in Tools after deployment.

[TCL735]

We are back to this being a clockface problem

The reason is because clockface uses two other fonts with woff2 files that do not throw this error in the console. This only happens with icomoon.

[TCL735]

Attempts to use only one of the file formats and deleting the rest from icon.scss were not successful.

In Chrome:

• removing any of the formats will cause a console error
• keeping all formats will show no discernible error, however, this issue was originally reported on Firefox. See below regarding Firefox.

In Firefox:

• removing any of the formats will cause a console error
• keeping all formats will cause a 404 when you look at the Network responses for Fonts

[TCL735]

At this point, it seems likely that the .woff, .woff2, and .ttf files for icomoon in Clockface are incorrect or corrupt in some way. Although I do not have specifics on exactly what's wrong with them.

[TCL735]

Update: the previous test locally was not done correctly. Any unused font files should be deleted, which they were not for the test, because Clockface's rollup with attempt to build all font files regardless of being used or not.

Will attempt another test and report back.

[TCL735]

Still does not work.

It appears that icomoon.eot and icomoon.svg either links or refers (imports) to the other three files that end with .woff, .woff2, and .ttf

[TCL735]

This is actually a Giraffe problem.

The filenames that Firefox complains about can be found in Giraffe's dist folder

[TCL735]

Still not working.

[TCL735]

The error message "downloadable font rejected by sanitizer" still appears in the console, even though the request is now a 200.

Looks like the fetching of the asset is fine but the format or interpretation of the woof, woff2, and ttf files in Giraffe is still incorrect.

[TCL735]

One way to solve this issue is to ask Giraffe to bundle all of its CSS into a single file, similar to what Clockface already does. This will allow the static assets in the CSS to be put into the correct folder during build time.

Closing this issue in favor of influxdata/giraffe#686