Icon Fonts and Matches Found

[satrow]

One last one, just to get a wider variety of instances, perhaps: http://www.bloomberg.com/news/articles/ ... -u-s-crash Again, the social buttons are represented by letters.

I'm not seeing a problem with any of the sites you've linked to.

[groundhog2]

Do you have your own forced font? I'm using Segoe UI as my font system-wide. And Consolas for monospace.

[satrow]

Do you have your own forced font? I'm using Segoe UI as my font system-wide. And Consolas for monospace.

No.

Have you allowed web pages to use their own fonts?

[groundhog2]

No, that's the crux of this issue and the fix added in PM 25.6: "Added a feature to allow icon fonts to be used even when users disallow the use of document-specified fonts. This should retain full navigation for icon-font heavy websites (no more dreaded "boxes" with hex codes) when custom text fonts are disabled." I can allow sites to specify their own fonts and it goes away. But I don't want sites to use their own (usually ugly) fonts. A lot of websites are now fixed with 25.6 (Netflix, Twitter, Mashable, Spotify), but as I posted a few links here, some still remain broken. They don't show the boxes with hex code, they show various letters and/or numbers. So they must be doing something else with web-fonts.

[Moonchild]

Please understand that this fix hinges on whether the fonts people use are defined properly. If they are "general use" fonts with a generic family but have "tacked on" icons, then they will still break because there is absolutely no way for the browser to know in that case what to change to the preferred font.

Icon fonts should be separate fonts, and should not have a generic family they belong to. All dedicated icon font suppliers do this properly, as far as I know.

So, for icon fonts to properly work when document-fonts are disabled:

• Downloadable fonts must be allowed (CSS @font-face{})
• icon fonts must be their own, individual fonts and not an "extended normal font"
• The icon font used must not have a generic family (serif, sans-serif, etc.) or it will be considered a text font
• Extensions that manipulate fonts must be aware of the way the browser recognizes icon fonts

[groundhog2]

Thanks, Moonchild. Since you know much more about this issue and web design in general than I do, could you please check the links I posted to try and see what exactly is causing this. I'm just curious why this is happening on these various sites. Maybe you'll even be inspired to create a fix! Not likely, I know, but one can dream....

[Smokey20]

I am extremely grateful for this fix as the site (http://www.dslreports.com) I spend most of my time at ever since I got broadband in 2001 has a LOT of these icon fonts now. Before this version of Pale Moon, I was having to fake as IE 7 in order to get the old icons on this particular site which also has my home page with a bunch of these icon fonts. Or I had been using IE 10 because it shows the old icons there but Pale Moon, Fx 39 and Sea Monkey all had the boxes with dots in them if I did not fake as IE 7 (and IE 10, at one point, was also showing boxes with dots but then it started showing the old icons again). But now, on Pale Moon this is fixed at dslreports.com.

We've been talking about it in a thread there with the site owner who was saying that we users who force a specific font for documents for all sites would now need to use our own CSS sheet. It doesn't look easy for the average user to make up a style sheet so I was very happy when I saw Pale Moon 25.6 fix it and to be the first of my browsers to do so (and my default browser). The site owner doesn't seem to think much of Pale Moon, Fx, etc as he was amazed that Windows browsers (he's Apple all the way) allow global override to choose the font that works best for the user. He was ignoring what I was saying that I have to use Verdana Bold everywhere. He says that should not be allowed by browsers and he seems to have zero concept of accessibility for users. He claims the setting in Windows browsers (which is an accessibility setting as Microsoft rightly labels it in IE) that allows this should be deleted from all browsers as it is not workable on the "modern" web and is a "leftover" from ancient Netscape days. I was happy to post in that thread and tell another user who didn't want to have to write his own style sheet that the latest Pale Moon fixes the problem at dslreports.
http://www.dslreports.com/forum/r30195619-

I too though am curious why the sites mentioned by groundhog2 are not fixed as most sites that I visit that have icon fonts are fixed in this new version of Pale Moon but the sites mentioned by groundhog2 remain unfixed for me also.

[Moonchild]

I already explained this, but maybe it didn't get across.

Trying again:
Icon Fonts that are generic fonts with just letter glyphs replaced by icon glyphs will not be "icon fonts" that any browser can discern from letter fonts. A big "A" instead of an icon is a good indicator that the font used is classified with a "generic family" and replaces normal letters. This will NOT work when you tell the browser to replace document fonts with your own preference, because the browser sees a normal letter font and replaces it with your preferred letter font instead of allowing the custom font.

IOW: the sites need to use proper icon fonts, not generic fonts with letters replaced. They can draw some lessons from the custom fonts put out by e.g. FontAwesome and the likes, who do this properly. It can be solved by changing the actual font file to not be a generic family font anymore.

[groundhog2]

It's strange, but taking that last link for the story over at Bloomberg, there's a social sharing thing on the left of the story, and I'm just seeing letters: f t h... Looking at the page code, I don't see those letters though:

Code: Select all

<div class="social-share"><div class="bb-social-links" data-view-uid="1|0_5_1_3_1_1"><a data-view-uid="1|0_5_1_3_1_1_1" class="bb-social-link bb-social-link--facebook" href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fbloom.bg%2F1D71oYb" rel="nofollow" data-social-network="facebook" target="_blank">Share on Facebook</a><a data-view-uid="1|0_5_1_3_1_1_2" class="bb-social-link bb-social-link--twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fbloom.bg%2F1D71oYb&text=Analyst%20Who%20Predicted%20Bottom%20for%20Shanghai%20Stocks%C2%A0Sees%20Further%2014%25%20Plunge&via=undefined" rel="nofollow" data-social-network="twitter" target="_blank">Share on Twitter</a></div> <div class="social-share__more"> <div class="social-share__more-icon"></div> <div class="social-share__additional"><div class="bb-social-links" data-view-uid="1|0_5_1_3_1_2"><a data-view-uid="1|0_5_1_3_1_2_1" class="bb-social-link bb-social-link--linkedin" href="http://www.linkedin.com/shareArticle?title=Analyst%20Who%20Predicted%20Bottom%20for%20Shanghai%20Stocks%C2%A0Sees%20Further%2014%25%20Plunge&url=http%3A%2F%2Fbloom.bg%2F1D71oYb" rel="nofollow" data-social-network="linkedin" target="_blank">Share on LinkedIn</a><a data-view-uid="1|0_5_1_3_1_2_2" class="bb-social-link bb-social-link--reddit" href="http://reddit.com/submit?title=Analyst%20Who%20Predicted%20Bottom%20for%20Shanghai%20Stocks%C2%A0Sees%20Further%2014%25%20Plunge&url=http%3A%2F%2Fbloom.bg%2F1D71oYb" rel="nofollow" data-social-network="reddit" target="_blank">Share on Reddit</a><a data-view-uid="1|0_5_1_3_1_2_3" class="bb-social-link bb-social-link--google" href="https://plus.google.com/share?url=http%3A%2F%2Fbloom.bg%2F1D71oYb" rel="nofollow" data-social-network="google" target="_blank">Share on Google+</a><a data-view-uid="1|0_5_1_3_1_2_4" class="bb-social-link bb-social-link--email" href="mailto:?body=Analyst%20Who%20Predicted%20Bottom%20for%20Shanghai%20Stocks%C2%A0Sees%20Further%2014%25%20Plunge%0ABy%20Ye%20Xie%0Ahttp%3A%2F%2Fbloom.bg%2F1D71oYb%0ABloomberg&subject=Analyst%20Who%20Predicted%20Bottom%20for%20Shanghai%20Stocks%C2%A0Sees%20Further%2014%25%20Plunge" rel="nofollow" data-social-network="email">E-mail</a></div></div> </div> </div>

I'm seeing the reference to Facebook, for instance, but I don't see a letter "f" that I end up seeing. I'm just trying to fully understand the mechanics of this. Sorry.

[Moonchild]

Bloomberg is obviously aware of the icon font issues and has a workaround in place.
As for the icons themselves, they are likely filled by using the CSS classes on the links, e.g. "bb-social-link--linkedin"

[Michael]

@Moonchild,

Thank you.
Special thanks for integrating the code in PM.

@squarefractal,
Thanks for the info. I appreciate it.

@groundhog2,
I have the same problem in all the links you've posted. How do you get https://notepad-plus-plus.org/community/?
You might be intersted in this. Another way to manipulate fonts.

Best regards.

[groundhog2]

@groundhog2,
I have the same problem in all the links you've posted. How do you get https://notepad-plus-plus.org/community/?

This one works fine. All the icons at the top come through and in the colored circles. It could be due to the font you are forcing maybe? I'm using Segoe UI.

[Smokey20]

I already explained this, but maybe it didn't get across.

IOW: the sites need to use proper icon fonts, not generic fonts with letters replaced. They can draw some lessons from the custom fonts put out by e.g. FontAwesome and the likes, who do this properly. It can be solved by changing the actual font file to not be a generic family font anymore.

Thanks! I can be dense at times but this second try of yours got through to me. I get it now.

[Michael]

@groundhog2,

Thanks.
You're probably right. I've disabled Clear Type, and I don't use Segoe UI.

Best regards.

[groundhog2]

So the question then becomes, why do certain sites opt to use these "generic" fonts? Even some pretty high-profile sites?

[Moonchild]

So the question then becomes, why do certain sites opt to use these "generic" fonts? Even some pretty high-profile sites?

Most likely:

1. It is a fair assumption that the (hired) designers assumed the use of site fonts without restriction. When you design a site, you generally make use of these tools and options to provide the best representation to visitors. "Custom document fonts" is not something you would usually take into consideration because it breaks your design.
2. It reduces the number of fonts downloaded (if you can make a single amalgamation of your custom font + icons in a single file, that saves the download of another). It also simplifies the CSS needed.
3. There are some commonly-used tools that create these site-customized, amalgamated fonts for web designers with minimal effort, and that can include any company-specific custom fonts not found in the commonly available generic icon font libraries out there. It's an economical although less considerate solution.
4. Up to now, this was not something that would commonly (or at all) be mitigated on the browser side. So it falls back to point 1, that designers would not take this situation into account because from a design perspective, you can't be expected to.

[groundhog2]

It's just that I've been forcing my preferred font in my browsers since day one, back in 1995, and I'm not about to stop.

[Moonchild]

It's just that I've been forcing my preferred font in my browsers since day one, back in 1995, and I'm not about to stop.

That's your choice -- but not all sites will work, despite the fix put in. This is as far as a browser can go, the rest will have to be websites meeting us half-way.

[groundhog2]

Well I'm very thankful for the fix, Moonchild!

[Michael]

Hello,

Firefox 41 displays all the icon-fonts in Notepad++ Forum properly.
On the other hand, the problem reported in Bug 1208286 doesn't occur in Pale Moon.

Regards.