Don't use font-based icons.
I don't allow sites to load custom fonts, for complicated reasons.[*] That means that recently many of your fancy buttons became unreadable, because they're just random Unicode symbols for me.
This doesn't bother me much so far, but it's slowly making the site unusable. Please don't put important controls behind tiny icons that might not even render. Use human-readable text. Text is a Good Idea.
We've finally moved past Flash scrollbars and related usability disasters. Please don't be part of The Next Sucky Thing.
</grumpyoldman>
[*] Reasons include: "I can't read your silly/tiny/giant/messy/etc. fonts", "I have a complex font stack that just works for all those languages I need to read, and people messing with it is Not Acceptable", "I really really like consistent fonts on everything and Special Snowflake Syndrome sucks" and "THAT IS NOT WHAT FONTS ARE FOR; YOU ARE DOING IT WRONG".
Stefan Dorn
shared this idea
-
Stefan Dorn
commented
fyi, Firefox 41 now has the option to only use webfonts if no available font has the glyph, which is pretty much the sane compromise I always wanted.
So as long as the font icons are in the private use area (which no basic system font should use), everything is fine and works as intented. As far as I can tell (quick skim), Beeminder respects that and everything works for me now.
(frowning at imgur and other sites that hate Unicode grumble and re-skin random letters)
I'd still favor not using icon fonts because text is great and random symbols are the devil, but the issue is a lot less painful now.
-
Alan Pearce
commented
Best of both worlds idea: make custom fonts use ligatures to render symbols: http://alistapart.com/article/the-era-of-symbol-fonts
-
Admindreeves
(Cofounder, Beeminder)
commented
I think I'm sold on this! Just not sure how high a priority it should be. Maybe get all your friends to upvote it? :)
-
Stefan Dorn
commented
Also seriously, special icons for *plus* and *minus*?! Are you *intentionally* trying to break usage as much as possible?
</mumblegrumble>