Technical Marketing Guide

A travel guide for technical marketing – get inspired and start exploring yourself.

How to create a web icon font using illustrator and fontastic.me

So the other day I wanted to display a few keyboard shortcuts to my fellow coworkers. I wanted to display those shortcuts in a visual way, not just the keystrokes, but actually a representation of the key with the icons and all.

I thought it would be great if somebody had made a font for this, where I could just press the corresponding key and a visual of the key would come right up. I didn’t find a font so I created one.

What you need to create a web font:

  • A vector-based image editing software (e.g. Illustrator) to create the svg-files for the characters
  • A service or program to convert the vector-icons to a font
  • Patience (if you’ll create a whole set)

Step 1: Fire up your vector image editing software and create your icons.

I created all my needed icons and also matched one artboard to each character. Be sure to draw all artboards at the same size otherwise your font won’t display all in the same height and widths.

Step 2: Export those icons as one svg-file for each character

Naming your files correspondingly will speed things up later.

Step 3: Uploading the icons to a service to convert to a font

I used fontastic.me to create my (web) font. It looks nice, is easy to use and worked perfectly for me. There’s also icomoon.io but I found fontastic.me to work better for me.

Most importantly you’ll use the service to match a character to each of your icons and download your newly created own custom web icon font. Of course you can also use the font just on your computer. Just install the corresponding font by doubleclicking it.

And here it is: My custom created web font to display mac keyboard shortcuts

mac keys

So if you ever come across the same problem. Use my Keyboard Shortcut Font as a Webfont or Desktop Font. Of course I would be happy for some credit but I don’t want to deal with licences now or figure out a way how to charge for this.

What you’ll get

A keybord web font with 60 characters including cmd, return, fn, esc and so on. Use this free font every time you want to show a shortcut for Mac. This is the english version. So set your keyboard to english to easily get to every icon

→ Download the font

Time for an example

One of my most used shortcuts is this one

W Q & 4

All characters

z y x w v ! u § % t ^ & s @ * r q p o n m £ l k j i h g ( f ) e $ _ d Q W E c b R a 9 8 7 6 5 4 3 2 1 0 ] ' ; / , . = 

Previous Post

7 Comments

  1. Robert October 26, 2013

    Ich seh die Fonts irgendwie nicht. Es sei denn die Standard-Buchstaben sind Absicht?

    http://img841.imageshack.us/img841/6518/zmol.png

  2. Daniel October 26, 2013 — Post Author

    Das ist definitiv nicht so gewollt 😉 So sollte es aussehen bzw. so sieht es bei mir aus … http://cl.ly/image/3K1B0K450y2c

  3. Robert October 27, 2013

    Seltsam, dein CSS Code sieht handfest aus. Geht auch in anderen Browsern nicht..
    Vielleicht siehst du es richtig, weil du die Schrift auf deinem Computer installiert hast?
    Kannst ja mal eine Testseite durch Browsershots durchlaufen lassen.

  4. Daniel October 27, 2013 — Post Author

    Danke Robert! War tatsächlich ein kleiner Fehler im Code 🙂 Und bei mir ging’s weil ich die Schrift installiert hatte! Jetzt sollte es aber auch bei Dir gehen!

  5. Robert October 28, 2013

    Jetzt seh ich garnichts mehr 🙁
    http://i.imgur.com/ftUYyI4.png

    (Was genau war denn der Fehler?)

  6. Robert October 28, 2013

    BTW: Dein Webserver ist noch auf Sommerzeit 😉

  7. Robert October 28, 2013

    funzt *daumen hoch* 🙂

Leave a Reply

Never miss another guide, sign up now

Cookie Settings

© 2018 Technical Marketing Guide | Imprint