Funky icon rendering

[earther]

Two different machines, two different versions of Iceweasel, same problem on this forum.


This also happened on the edX software when I took a class in December.

Safemode doesn't make a difference. Chrome renders the icons properly.

Can this be fixed?

Thanks.

[patrickjdempsey]

Press Alt > Tools > Content > Advanced > check: Allow pages to choose their own fonts...

Or, if you are using NoScript, somewhere in it's setting it blocks web fonts (@font-face).

[earther]

Wow! Thanks! That was fast! Can I do that on a per site basis? I want all sites to use verdana. Not using NoScript.

[patrickjdempsey]

At this time there is no way to force websites to use a specific font and also have these kinds of icons appear. I've personally been attempting to find a way to make a CSS hack for that and it appears that the way that web fonts have been implemented is so incredibly stupid and shortsighted that it's not possible to work around. I'm not even sure who to blame for the stupidity of the implementation... it's just bad all around.

[earther]

This is happening on more and more sites. Hopefully, sooner or later a workaround will be found.

[patrickjdempsey]

Any sites you have that don't require a login?

[earther]

Any sites you have that don't require a login?

I think you'll be able to see this page on gitlab. List icons are funky.

[TheVisitor]

Any sites you have that don't require a login?

I think you'll be able to see this page on gitlab. List icons are funky.

Oops, can't view that page:

An error occurred during a connection to git.devuan.org. The OCSP server has no status for the certificate. (Error code: sec_error_ocsp_unknown_cert)

[Grumpus]

@earther - had no issue with the site, icons little globes.Noticed font for page is Ariel.
Maybe install Ariel, some Linux distros don't have it or you have to hunt for it.
No OCSP issue, Query OCSP repsonder servers . . . is checked.

[earther]

Oops, can't view that page:

An error occurred during a connection to git.devuan.org. The OCSP server has no status for the certificate. (Error code: sec_error_ocsp_unknown_cert)

Yes, it was down here too last night. Here's a bit of the #devuan irc log from last night when I was freaked out that I couldn't work on git. This is what one of the devs had to say:

<nextime> remove the Use the Online Certificate Status Protocol (OCSP) to confirm the current validity of certificates" tick
<golinux> Give me a sec
<nextime> pratically
<nextime> every time you try to connect to an HTTPS web site
<nextime> firefox will try to validate the certificate (also) by contacting a server using the OCSP protocol
<nextime> chrome doesn't do that
<nextime> other browsers don't do that or do that in a soft fail way
<nextime> probably there is an issue with the OCSP server or on your provide routing
<nextime> so, you can't connect to the OCSP server for the startssl certificates
<nextime> and then you can't validate any certificate emitted by startssl
<golinux> Ah that fixed it. Should I re-enable it at some point?
<nextime> firefox, in this occurrence, give you an error instead of soft failing
<nextime> it isn't really needed, it's a security added measure not so important
<nextime> anyway, if you prefer to have it, you can re-enable it maybe tomorrow
<golinux> OK thanks. Will be interesting to see if it is still working on my wheezy machine later.
<nextime> probably not, as firefox and then iceweasel has it enabled by default starting from version 3
<golinux> I've had that profile since version3!
<nextime> actually as browser, firefox is using it with hard fail, chrome has it disable totally, internet explorer and safari have it in soft failt
<nextime> fail
<golinux> Maybe my provider did an update to the modem tonight.
<nextime> anyway, consider to leave it disabled, as it serve mainly for knowing if a certificate is revocated
<nextime> and it adds latence and have privacy issues
<hellekin> golinux: I received such errors myself. I think StartSSL servers went off at some point. Silly CA system. Utterly broken from anywhere you look at it.

[earther]

@earther - had no issue with the site, icons little globes.Noticed font for page is Ariel.
Maybe install Ariel, some Linux distros don't have it or you have to hunt for it.
No OCSP issue, Query OCSP repsonder servers . . . is checked.

If you can see the icons, you are allowing sites to choose their own fonts. Untick that box and the icons will break. I probably have about 500 fonts installed including Ariel - do a fair amount of graphic work.

As to OCSP see above. Site has been working fine for months. hellekin confirmed it was probably the OCSP servers. He's in Argentina BTW so problem reached outside the US. Things seemed to be fine in Italy though. Go figure . . .

[Grumpus]

You're right on the "Allow sites to use their own fonts."
Got a backwards C with a tilde over top and a carat over that. (this does not appear to be a known symbol for Earth or planet according to Google)
Also changed my typeface to some serif thing used to configure this system.
Did the OCSP thing during the post so it must have been fixed.

[earther]

Did the OCSP thing during the post so it must have been fixed.

Indeed. It was fixed within a few hours.

[patrickjdempsey]

So this is what I've been working on for a little while now. Basically the idea is to create CSS code that will force *most* of the website content to follow certain fonts and font sizes. It also strips out some annoying bits like letter spacing and tries to make sure that certain features like links and code and quotes look like what they should look like.

The websites you listed, as well as most of the ones I've discovered over the last year or so that are using font icons are using Font Awesome: http://fortawesome.github.io/Font-Awesome/

This is good because we can detect Font Awesome icons pretty easily... here's a bit of code for detection:

Code: Select all

   /* Highlight Font Awesome icons */
   .fa { color:red!important; }

So here's the current version of my code. It tries to avoid Font Awesome icons, it is also designed in a way that it avoids certain parts of websites like menus and tables which are easily broken by mucking about with font sizes.

Code: Select all

 
   /* Remove annoying letter spacing */
   html * {
      letter-spacing: unset!important;
   }
   /* Fix fonts and font-sizing in website content */
   blockquote *:not(.fa):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre):not(code),
   blockquote, 
   input *:not(.fa),
   input, 
   html textarea *:not(.fa):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre):not(code),
   html textarea, 
   article *:not(.fa):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre):not(code),
   article, 
   p *:not(.fa):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre):not(code), 
   p {
      font-size:13px!important;
      font-family:sans-serif!important;
   }
   /* Make links look like links */
   pre a,
   blockquote a,
   cite a,
   article a,
   p a {
      text-decoration:underline!important; 
   }
   /* Make quotes look like quotes */
   q *, q,
   blockquote *, 
   blockquote {
      font-style: italic!important;
   }
   /* Force code and pre to use "monospace" or "-moz-fixed" fonts */
   code *:not(.fa), 
   code,   
   pre *:not(.fa), 
   pre {
      font-size:12px!important;
      font-family:monospace!important;
   }
   /* Make headings look like headings */
   h1:not(.fa), h2:not(.fa), h3:not(.fa), 
   h4:not(.fa), h5:not(.fa), h6:not(.fa),
   h1 *:not(.fa), h2 *:not(.fa), h3 *:not(.fa), 
   h4 *:not(.fa), h5 *:not(.fa), h6 *:not(.fa) {
      font-family:sans-serif!important;
      font-weight: bold!important;
   }
   h1 { font-size: 24px!important; }
   h2 { font-size: 21px!important; }
   h3 { font-size: 18px!important; }
   h4 { font-size: 16px!important; }
   h5 { font-size: 15px!important; }
   h6 { font-size: 14px!important; }

You'll have to either use Stylish, Generic CSS Loader or the userContent.css file to apply these styles.

[earther]

Hmmm . . . How is it useful to highlight Font Awesome Icons in red? In my case, I actually want the icons to display (even thought they look incredibly stupid). As for the rest . . . the sites I visit regularly don't need many tweaks. And if a site requires a major css overhaul, I'll probably just avoid that site.