Photoshop is Dead: How to use Keynote with Font Awesome

To rapidly prototype apps and websites

Apple’s Keynote app is arguably a faster way to prototype an app or website, rather than photoshop. It is more intuitive to use, more universally available on your teammates Macs, and also the keynote iCloud beta lets you collaborate in real-time through the web. This helps foster faster collaboration and more fluid feedback. However, one glaring shortcoming is the inability to add icons to your design. Enter Font Awesome. (Or your particular icon font of choice.)

Here’s how to use Font Awesome with Keynote.

Step 1: Download Font Awesome zip file here.

Unzip the file and open the folder. Navigate to the fonts folder and double-click the FontAwesome.otf file.

Step 2: Install the font using the Font Book application.

After double-clicking the file, a Font Book window should open. Click Install Font. If there are any errors, you can most likely just check the box and click the Install Checked button and everything should work fine.

Step 3: Copy and Paste the icon you want from the Font Awesome cheat sheet.

Using the Font Awesome cheatsheet, copy and paste the icon you’d like, not the words or the unicode, into a text box in keynote. It will probably show up as Helvetica and not look like your icon yet. Read on…

Step 4: Select FontAwesome from the hidden Font Menu.

With the pasted icon selected (that still looks like Helvetica gibberish), hit command+t or click format -> font -> show fonts from the Keynote menu. A fonts window will pop up. Then search for FontAwesome. Select it.

Boom! You now have an editable Font Awesome icon in Keynote.

Note: Font Awesome will not show up in the Format -> Text sidebar.

BONUS TIP: In the Setup sidebar tab, you can specify a custom slide size to design an entire scrolling landing page, and can have different slides with different versions.

Awesome! Hope this helps someone. Now you can start prototyping and collaborating faster with Keynote. Cheers!