The 24 Clock on ALARMd

January 24, 2010

If you’re only using @font-face for titles and text, you’re missing out on a whole wealth of use cases that have yet to be explored. For instance, I created a very simple 7 Segment Display Numeric font to be used for a skin on alarmd.com and changed the color using nothing but CSS to create the “24″ Clock (true fans will note that the actual font is italic and has a serif on the 1). Nonetheless, this is just another useful application of @font-face.

Take a look at the Dingbats section on fontsquirrel to get your brain going in the same direction.

1,571 Views

< Newer
Older >

Zach Leatherman is a builder for the web at Font Awesome and the creator/maintainer of Eleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 85 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

3 Comments

Matt Steele Disqus
25 Jan 2010

A few suggestions:Put the clock tick sound on the pageMake the default video Jack Bauer yelling Damnit!Stop using sensible technical phrases and start uttering gibberish.
Jonathan Sharp Disqus
28 Jan 2010

Is it Web 2.0 compatible with AJAX? Oh, and what port do you need to open to send it to my screen?
Zach Leatherman Disqus
30 Jan 2010

It's HTML 5 and doesn't use Flash! Fully compatible with the iPad and multi-touch!

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

The 24 Clock on ALARMd

Matt Steele Disqus

Jonathan Sharp Disqus

Zach Leatherman Disqus