Zach’s ugly mug (his face)

Zach Leatherman

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.

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
Trash that “Back to Top” Link
Next
DIY Webdings—CSS Sprites using @font-face
3 Comments
  1. 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.
  2. 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?
  3. 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:

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)