Icons not displayed correctly on some browsers

Hello,

Iconic fonts are not working well on tor browser and in firefox with option "browser.display.use_document_fonts" set to 0.

This option is necessary to avoid JS based identification of system fonts in order to lessen the browser's fingerprint uniqueness.

The possible reason for the fonts not working is that they are assigned through JS. So, a potential fix would be to set them statistically through css.

Could someone investigate and fix this.

Thank you :)

Nothing? ... :'(

I don't understand the reported issue. What does "iconic fonts are not working well" mean?

Here's what I meant:

ibin.co/3hbUF5VUldV2.png

You can simulate this with uBlock origin.

github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts

Screen:

Btw, the specific font is downloaded from lichess servers (lichess1.org/assets/font75/fonts/lichess.woff), but there are six other fonts which are downloaded from fonts.gstatic.com. I dont know if that is allowed by google (Edit: it seems to be: stackoverflow.com/questions/8966740/how-to-host-google-web-fonts-on-my-own-server) but if these fonts were also downloaded from lichess servers this potential tracking issue would be resolved.

Hello @theoriefritze,
I don't think it's the same issue.

I use uBlock too. So, if I toggle the blocking of fonts, then all remote fonts are blocked (as expected).

However, in tor browser or by setting the "browser.display.use_document_fonts" setting to 0 in firefox, then not all fonts are blocked, but only dynamically set fonts (through js).
So, fonts loaded in css are not blocked.

You can try to open this page for instance: jsfiddle.net/.
If I block the fonts using uBlock, then I see no icons as expected. However, if I only set "browser.display.use_document_fonts" to 0, then I see the fonts with no problem. The reason is that fonts are loaded statistically in css, while lichess preloads the font using a link tag, then assigns it using js.

@Samy129291 you are right. Why do it using js if there is a standard way doing it with css? It breaks more workflows, like for example yours.

I would add my suggestion to load all fonts directly from lichess as an addon.

TIL it's possible to preload/assign fonts using JavaScript.

I wonder... why not also specify it in CSS, to avoid breaking workflows? I don't know much about web design but such a thing seems useful.

Hello,

@Toadofsky it's indeed possible to assign fonts using JS. This can be used to identify all / most of your system fonts using JS. The technique consists roughly on changing the font of a specific text, and check if its width has changed (if yes, then the font is installed, otherwise it's not). That's why the feature is disabled in tor browser for instance.

@theoriefritze yes, that is what I was thinking, if it's possible to avoid js all the way for icons then why not.
But, I didn't really investigate the issue or lichess code properly. It seems clear that some JS is involved (icons' text is defined using data-icon attribute, then set using JS). On another hand, I just had a quick look in common.css and the lichess font is loaded using regular @font-face rule.

So, it would be nice if a dev could investigate this properly.