dashboard icons: browser.display.use_document_fonts & material design icons about headereditor HOT 24 CLOSED

@Maryse47 Yes, I use a lot of new components and I am thinking about how to solve this problem.

from headereditor.

Added

from headereditor.

4.0.2 (or I assume more specifically, 22f1780) fixed it for me 💋

from headereditor.

I'm sorry for my negligence. The icon is google/material-design-icons

from headereditor.

I'm sorry for my negligence
No negligence here :) You're doing an awesome job.

ON the material design icons github page they say

it is generally better to link to the web font hosted on Google Fonts

I see the icons are local under ..\third-party\material-design-icons - so I assume that no calls are being made to google, right? (I am not a developer)

The problem is caused by browser.display.use_document_fonts=0. This is the setting under

 * [SETTING-56+] Options>General>Language and Appearance>Advanced>Allow pages to choose...
 * [SETTING-ESR] Options>Content>Font & Colors>Advanced>Allow pages to choose...

I could probably live with the icons displaying text (a lot of them are truncated), and that is what I will have to do because I cannot allow documents fonts - doing so destroys my font fingerprinting defense and causes very high entropy,

Other extensions load various icon fonts just fine. I am not a developer, so please excuse my ignorance on this, but there must be a way for this to work with browser.display.use_document_fonts=0

@gorhill Sorry for taking up your time, but uBo and uM use icon fonts no problems. Could you please have a quick look at this, or explain in tech terms how you implement it. For all I know its not the implementation but how Firefox determines that Material design is not a glyph. It's beyond my knowledge, so would appreciate some help

from headereditor.

@Thorin-Oakenpants Looks to me you are afflicted by something similar to gorhill/uBlock#2878. My understanding: use_document_fonts=0 means "do no use document fonts, except when no code point is available in the system font".

However, somehow, your system font contains glyphs for code points which are used by the font-based icons -- hence the browser ends up using a glyph from your system font rather than the one from the icon font.

from headereditor.

@gorhill - nope, I am getting NO icons, not even tofu ¹ (see first pic, unless tofu means I get some text displayed instead). I have no trouble getting your icon fonts, or anyone else's in various panels, etc. Back before mozilla added gfx.downloadable_fonts.enabled in FF41, there was the issue that uBo/uM icon fonts were blocked. That was years ago.

So it's something else, either:

• material design icons and/or their PUA's are not being detected as glyphs/icon-fonts and covered under gfx.downloadable_fonts.enabled (which I have as true) and thus they fall under use_document_fonts (which I have as false)
• the implementation in this extension differs from everything else that I have that shows icon fonts

¹ https://en.wikipedia.org/wiki/Tofu_(disambiguation)

Tofu, or tofu character, Internet slang for substitute character, the empty box or other marker shown in place of an undisplayable code point (character) in a computer font (typeface)

PS: my three allowed fonts are very stock standard for windows. this is something different AFAICT
PPS: Thanks for you time and input, btw

from headereditor.

I'm also affected by this issue.

from headereditor.

Ok, I had to dig and today-I-learned about ligatures. Excerpt from the Material Fonts documentation:

This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.

So no code point is used in the HTML source, but rather a symbol name, and from this symbol name the browser is able to fetch the proper icon in the font. I suppose if the browser can't find the icon from its name, it just does not render anything -- as opposed when a code point is declared, the browser will use tofu if no glyph exists for that code point.

from headereditor.

I found a solution. If you set use_document_fonts=0, Firefox will change the default font-family to sans-serif, "Material Icons", because the word "list" can be rendered by sans-serif correctly, the "Material Icons" will take no effect.
So, use <i class="material-icons">&#xE896;</i> to replace <i class="material-icons">list</i> can solute this problem, because the  is a special word which can not be rendered by sans-serif correctly, Firefox will use "Material Icons" to render it.

from headereditor.

thanks @gorhill for the digging (now I know about ligatures as well) and @sylingd for the workaround

For the record: when you set/change use_document_fonts, it does not "change" your 3 default fonts, which you can do independently. The default fonts (.serif, .sans-serif, .monospace) are different per OS. And on top of that they will different on your language set (western, cyrillic etc)

Here's hoping the fix works universally :)

from headereditor.

Yup, I noticed: got this repo starred. Just been waiting for AMO to update to a new release when you're ready :)

from headereditor.

Just updated to 3.0.3 and can confirm on WIndows with browser.display.use_document_fonts=0, the icon-fonts/ligatures look great - thanks 👍

from headereditor.

@sylingd I think you have a typo: not worth a new issue

Add "Add anti-anti-theif-link" to right-click menu .. thief is spelled with an ie, not ei

from headereditor.

@Thorin-Oakenpants BTW what that option does?

from headereditor.

@fancytenseletters - that is the pref behind:

• [SETTING-56+] Options>General>Language and Appearance>Advanced>Allow pages to choose...
• [SETTING-ESR] Options>Content>Font & Colors>Advanced>Allow pages to choose...

0=unchecked (so you limit fonts to the three families specified above)
1=default

This is for some font fingerprinting mitigation

from headereditor.

@Thorin-Oakenpants
Nah, I meant what anti-anti-theif-link option do. 😄

from headereditor.

@fancytenseletters Don't like Google Photos, some online photo albums (e.g. Baidu, NetEase) don't allow users upload photos to it and using this photo in other websites(for example, someone's personal blog) because this will consume their bandwidth. It called "anti-thief-link".

from headereditor.

^^ oh, so "hot-linking" then: https://en.wikipedia.org/wiki/Hot_linking . I wondered what it meant as well. The checkbox is just to add a menu item AFAIK, so I didn't bother to dig any further :)

from headereditor.

Oh I didn't know it called "hot-linking", I will correct it

from headereditor.

That's just what I've always known it as - because... search google images for "hotlinking" or "hot linking" and you'll see some of the images sites use to serve up in lieu of ... back in the good old days of slow and costly bandwidth

The wiki link is an alias - the actual technical term according to them is "Inline Linking", but I don't think it's a very catchy name :)

from headereditor.

@sylingd after 4.0.0 release this prob;em is back.

from headereditor.

I have the utmost confidence that sylingd will provide a fix/workaround, same as last time 💋

from headereditor.

Because of the many new components used, the old fix methods are no longer valid. I have some new ideas, but they are more complicated, so the time to fix this problem may be longer.

from headereditor.