Around a year ago, I remember reading the article The Era Of Symbol Fonts on A List Apart.
Despite it being a bit too evangelical and hyperbolic – as the elevation of “Symbol Fonts” into an “Era” in the title suggests, I suppose – the article had useful info.
More practical – and with an eagle eye on the downsides – here’s an article that goes into, in depth, the use of Icon Fonts as UI elements in web pages.
It’s a minefield still. Beware.
Bulletproof Accessible Icon Fonts
A new and considerably improved version of the Drag n Drop Pangram Font Tester page has been posted.
If you’d like to use it on the web right off of this site, it’s located at this address:
If you’d like to download it and use it locally as part of your testing workflow – the full zip package – which now includes some fonts so you can immediately drag a font or two into the Font Loader Bar and see how it works, is located at this address:
Also included in that package is a “missing-glyphs.ttf” font which has to do with testing version 8.2’s biggest improvement:
Detecting Missing Characters
The page now has a built in “Fallback” font named “backdrop” included as a Data URI which is used to show characters missing from the font.
(A test font named “missing-glyphs.ttf” is included with the Version 8.2 package. Drag it into the page’s Font Loader Bar and you’ll see how the backdrop font works. Note: As of this release, the “backdrop” font is still very much in development with character coverage and the look of the symbol designating a missing character still to be finalized.)
Additional fixes and enhancements are listed in a text file included in the package.
Hoping those who create and work with fonts find this useful. I’ll be posting much more work in this vein over the coming year.