Icon Fonts and how to Create a Pixelfree Audio-Player

An icon font audio player.

An icon font audio player displayed in Firefox's Tilt debug mode.

I've been looking for an excuse to use web-font based icons for some time now, since I'm not a prolific Photoshop user I'd been sneaking them into apps I'd been making for a while. I found out that by combining font icons with Bootstrap style gradient filled buttons I didn't have to touch a graphics package at all. I instantly felt a little better about my work-flow.

The principle behind creating web-font based icons (or glyphs) is to select or -- better -- create a font of your choice and use this instead of gifs or a pngs as icons for your web site or app. This affords you various advantages, not least of which is the fabled device independence.

Device independence had been a fairly hot-topic for a while now but really reached melting point with the release of range of devices sporting retina screens. Suddenly there was a rush to address the perceived ugliness of non-retina designed sites on these new fancy screens and the web echoed with the aesthetically sensistive screaming "Blind my eyes - I can see the pixels!"

People rushed to address the issue without actually have to blind themselves but the method that stood out in it's simplicity was to use icon fonts.

Of course there are drawbacks to using icon fonts. Although the idea is simple there is some work to do to make sure they work properly and you should also take account of the fact that they are effectively mono-chromatic and that changing an icon can involve regenerating the whole font, you should also be careful to work-around semantic incorrectness and accessibility issues.

But the advantages of this technique are very tangible - it boils down to flexibility:

  • You can change colours and size easily, suddenly these elements are really part of your markup and can be controlled by CSS
  • They can be used in almost any HTML element including form fields
  • As fonts are effectively vectors they will scale to any size and so any device beautifully and forever

So let's run through a classic application of icon fonts - an audio-player's interface.

On the average player we have a play/pause button and let's throw in a mute button as an example of a more detailed icon.

You can create your own fonts but let's grab one that's already been made.

To do this you can head on over to fontello.com and select a suitable font and select suitable play, pause, mute and unmute icons. I used the Entypo font and chose the following:

Download and Fontello gives you just the fonts you need and some handy example HTML and CSS. So let's look at the CSS:



Marked up a simple player interface may look like this:



and if you've linked to everything properly you should see something like this:

Browser zoomed version of font based icons.

You can add this bit of CSS to tweak sizes and colours.



Now try zooming in using ctrl + or cmd + on your browser to simulate a higher pixel density.

I also created a version that uses images and you can see the difference.

Browser zoomed image of .png based icons.

While it's true that you could create two different images and serve up the correct image depending on pixel density. I like this solution better because as vectors, even zoomed the buttons look good and with pixel densities set to increase you never quite know how many you need to make.

File size is comparable but wait there's something not quite right. Try clearing your cache and you should see a slight delay as the font is loaded for the first time. This is known as a Flash Of Unstyled Text (FOUT) and may or may not be acceptable to you - if it isn't there's a workaround.

The trick is to base64 encode your fonts and embed them in a CSS file. Be aware that base64 encoding can add between 10% and 20% to file size but again I consider this a worthwhile trade off. In the case of the woff it goes from 4.7kB to 6.2kB.

So now you can get rid of your font directories if so required and change the lines in the CSS so that for example

url("font/entypo.woff") format('woff')

becomes something like

url("data:font/woff;base64,d09GRgABAAAAABIwABAAAAAAHBwAAQAAAAAAAA .... ... WwBI2xBQBEAAAA") format('woff');

and so on.

Which is pretty ugly, but if you put the font stuff in a separate CSS file you shouldn't have to look once you have defined it.

So not only have a device independent user interface we have a snappy one.

Since we've got this far we may aswell hook up the controls to an audio element. It's actually quite straightforward.

First let's use good old HTML to define the player and its sources.



Defining two sources will give you maximum browser coverage without having to resort to Flash.

Then all we need to do is hook our buttons up to the audio tag.

In your JS:



You're done.

You can find this demo and source code here.

[UPDATE]

We have successfully employed this technique on our new jPlayer.it site.

Further Resources

Safari’s problem with @font-face
Fighting the @font-face FOUT
Quick guide to webfonts via @font-face
Web Fonts and FOUT…

This blog post has been written by Mark Boas

Mark makes, writes about and promotes new and open web technologies. Co-founder of Happyworm - a small web agency and makers of the jPlayer media framework, he enjoys pushing the limits of the browser using HTML5 and JavaScript. Though a generalist at heart, Mark spends much of his time playing with web based media and real-time communications and is actively involved in helping news organisations world-wide as part of the Knight-Mozilla OpenNews initiative. A lover of all things audio, his passion often drives his work and is currently enjoying the challenge of taking audio ‘somewhere new’ with his Hyperaudio experiments. You can follow Mark on Twitter.

Single Post Navigation

2 thoughts on “Icon Fonts and how to Create a Pixelfree Audio-Player

  1. Pingback: Photoshop is Dead, Long Live the Web « AppsFuel Blog

About Us | Contact Us | Developer | Terms of Use | Privacy Policy

Copyright © 2013 Dada Entertainment, LLC. All rights reserved.