Broken icon fonts in some sites: github, coursera,...
I've been using a custom font (DejaVu) with unchecked "allow sites to use their own fonts" since a long time. But now some sites came with this new idea of icon fonts that look completely broken (a weird box with crazy stuff inside) until I globally check "allow sites to use their own fonts". Is there any way to configure different fonts per site? Specifically I would like to keep my all time configuration except for these specific sites which should be loading their beloved fonts.
Regards -- Carlos
All Replies (20)
Can you post a link to a publicly accessible page and attach a screenshot?
Here is a screenshot.
This is how it looks when I allow the site to choose their own fonts.
Same here, I was happy with using my font other than images breaking. Guess I'm going back to letting it choose fonts. =/
Image: Comparison from GitHub with "Allow pages to choose their own fonts, instead of my selections above" on and off
That looks like characters in the f000-f0ff range.
If you see the little boxes with the hex code then it looks that Firefox has a problem with locating a font that contains those glyphs.
Are there any downloadable fonts (@font-face) used on those pages?
cor-el that's the point of this thread.
This looks that some custom font is used for those icons, so it is only possible to check this on a real page.
Such a font is specified and downloaded on the web page via an @font-face rule and such fonts are only applied if fonts from the server are enabled.
I don't think that this is a change from previous Firefox versions (this forum downloads the Open Sans font).
There is nothing to do about this other than (temporarily) enable website fonts on those pages.
Can you post a link to a web page with such a broken font?
You can check out the CSS code via the build-in inspector via the right-click context menu.
That seems to be the case. What I was looking for with that option wasn't to turn something like this off, but just to display my chosen font in normal text. I'm not sure how the two could be differentiated.
Aeroxima trɔe
Please, don't forget how this started:
""" Is there any way to configure different fonts per site? Specifically I would like to keep my all time configuration except for these specific sites which should be loading their beloved fonts. """
The coursera course preview page is another example. If this font-face madness keeps going on there will be plenty others soon (and the custom font option would be rendered pretty useless).
memeplex trɔe
Sorry, but this can't be done as far as I know (it works if you set the font as the default font).
@font-face{font-family:'Octicons Regular'; .... }
.mini-icon, .mega-icon {
font-family: 'Octicons Regular';
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-decoration: none;
}
An addon could surely toggle the setting or font from defaults based on url. I imagine something might even be possible with Greasemonkey. Not the most elegant solution. (I don't see this as something Firefox would have built-in.)
But for Firefox: What about a setting forcing the chosen font, unless the character doesn't exist in that font, in which case it reverts to the one the site said to use? I think this would solve it, as well as potentially some language issues.
Aeroxima trɔe
This range is a user defined Unicode range and the characters in this range are not defined, so websites can use this to display specific characters like in this case a font that they called "Octicons" and that contains all kind of icons.
Other website may use this range to embed a different font.
You can see them if you download and install the font and run this code via the location bar.
data:text/html;charset=utf-8,<html><head></head><body><b>font-family:Octicons;font-size:25px;font-style:normal;font-weight:normal;font-variant:normal;font-stretch:normal;?0xf200;0xf28f</b><p style='font-family:Octicons; font-size:25px'><br /><br /><br /><br /><br /><br><br><br><br><br></p></body></html>
I got a mail back explaining:
"We use a custom font we made called Octicons for rendering all of our icons on GitHub. We do this because it allows our icons to work at all resolutions while remaining crisp and clear. If you have any custom font set in your browser that is overriding fonts specified by our website, these icons won't work correctly"
Aeroxima trɔe
I hope some way around this will be found. Ideally sites would use SVG for icons or some other approach to get crisp, scalable icons at any size without needing a font. Fundamentally, semantically, icons are a graphical item and not text so using a font to provide them isn't the best practice.
I would switch browsers over this, but Chrome looks terrible on my Ubuntu system. Firefox has been the only browser that I can convince to use DejaVu Sans Condensed. (That GTK+ bug and solution are described clearly here: http://keramida.wordpress.com/2009/11/07/dejavu-condensed-as-default/)
To make Firefox use a condensed font you need to specify font-stretch:condensed;
You can make such customizations via the userChrome.css (interface) and userContent.css (websites) files that are located in the chrome folder in the user profile folder.
font-family: "DejaVu Sans" !important; font-stretch: condensed !important;
data:text/html;charset=utf-8;base64,ZGF0YTp0ZXh0L2h0bWw7Y2hhcnNldD11dGYtOCw8aHRtbD48aGVhZD48L2hlYWQ+PGJvZHk+PGI+Zm9udC1mYW1pbHk6IkRlamFWdSBTYW5zIjtmb250LXNpemU6MjVweDtmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC12YXJpYW50Om5vcm1hbDtmb250LXN0cmV0Y2g6Y29uZGVuc2VkOz8weDIwOzB4N2Y8L2I+PHAgc3R5bGU9J2ZvbnQtZmFtaWx5OiJEZWphVnUgU2FucyI7IGZvbnQtc2l6ZToyNXB4OyBmb250LXN0cmV0Y2g6Y29uZGVuc2VkJz4gISIjJCUmJygpKissLS4vMDEyMzQ1Njc4OTo7PD0+Pzxicj5AQUJDREVGR0hJSktMTU5PUFFSU1RVVldYWVpbXF1eXzxicj5gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+PGJyPjwvcD48L2JvZHk+PC9odG1sPg==
So, currently, the desire to override the display fonts in Firefox is incompatible with the desire to visit websites that use fontified icons. Unless the user is willing to manually turn the "allow pages to choose their own fonts" setting on and off every time.
cor-el, thank you for the suggestion, but just like the fontconfig method I have been using, it only works as long as I am forcing a display font and not allowing sites to choose their own. And when that is the case, github and sites like it cannot display their fontified icons.
Until an addon or an update addresses this, we are forced to choose between abandoning github and other favorite sites, abandoning firefox, or having to read email and social sites in fonts that look terrible on some platforms. It's not a happy choice. More and more fontified icons are expected to show up on more sites in the future.
You can still consider to override this only for specific web pages or domains that you visit frequently.
Add the code to the userContent.css file.
@-moz-document domain(support.mozilla.org), domain(xxx.xxx){ font-family: "DejaVu Sans" !important; font-stretch: condensed !important; }
I wrote a demo Greasemonkey userscript for this but because it runs after the page initially lays out, you have to tolerate seeing the font change on every single page load. I think that would get on your nerves after a short time.
The obvious approach Firefox should take is to obey the user's font settings for defined UTR-8 character ranges, but use the site's fonts for undefined/privately-defined fonts.
I would greatly look forward to this being fixed in Firefox, since I've noticed more and more sites recently having this problem. It's only going to get worse.