[Feature Request] Only replace text fonts and leave icon fonts untouched

[quantenzitrone]

Feature Request

Is this feature request related to a problem?

If the change font feature is enabled on a lot of websites the icons don't work anymore, because the icon fonts that were used to display the icons were replaced by my custom font. see #7868 #9596 and more

So my proposal is that Dark reader could only change certain fonts and leave all the icon fonts untouched. For that there would need to be a internal list of icon fonts that don't get replaced. On the https://fonts.google.com/icons (see screenshots) all the available fonts that shouldn't get replaced are

• Material Symbols Outlined
• Material Symbols Rounded
• Material Symbols Sharp
• Material Icons Outlined
• Material Icons Filled
• Material Icons Rounded
• Material Icons Sharp
• Material Icons Two Tone

I don't know if there are any other fonts that would need to be on that list but probably yes. Is this even possible without rewriting the whole Font Replacement?

Screenshots

Additional Context

[quantenzitrone]

Found another icon font:

• gog-icons

[hedgehogface]

Also please exclude this one:

PowerBIGlyphs-regular

[Gusted]

So my proposal is that Dark reader could only change certain fonts and leave all the icon fonts untouched.

Well, if it was as easy as that, it would already have been done. But Dark Reader currently does a stupidly simple mechanism to provide the custom font: https://github.com/darkreader/darkreader/blob/12caab050d6e3c5bdf49d3d49a9f47a0378d3235/src/generators/text-style.ts#L3-L22

So checking the values of the font-family CSS Rules and then deciding if we should modify the font or not is something that's not easily achieved. Certain sites will even liberally add emoji's/icon font families to every element, so at that point this "detection" mechanism will not provide any custom font to these elements at all, leaving users to think there's a bug...

[astkaasa]

I use other extension like stylebot to change font, just copy the css selector in above text-style.ts code and modify yourself. For example, I change it to

*:not(pre, pre *, code, .far, .fa, [class*="fa-"], .glyphicon, [class*="vjs-"], .fab, .fa-github, .fas, .material-icons, .icofont, .typcn, mu, [class*="mu-"], .glyphicon, [class*="icon"], .gog-icons, .google-material-icons) {
    font-family: Charis SIL !important;
}