Using Fontello with Photoshop & Illustrator

Yelldon edited this page Oct 22, 2015 · 2 revisions

In a few easy steps we will cover how to use a Custom Fontello Font designed by you to go into your designs. This tutorial is using OSX 10.9.2 and Photoshop CS6 & Illustrator CS6.

Step 1 - "Set up" Click the wrench icon drop down menu right under the header and select "Advanced Font Settings". Inside of the Advanced font settings modal window, change your Encoding to Text Characters and click Save.

Step 2 - "Selection" Click any and all of the wonderful icons you wish to use in your custom font. Each icon you select a value will be associated with it. This value is what you would type on your keyboard to show an icon. This value can be located in the Customize Codes tab. Inside the Customize Codes tab the value you are looking for is in the little box above each selected icon. You can also enter in your own values if you wish.

Step 3 - "Download" Once you are finished selecting all your icons you can now download your font by selecting the red button that says "Download webfont" in the upper right hand corner of the page. If you choose to give your font a special name enter it in the text box to the left of the download button.

Step 4 - "Installation" Your font will downloaded in a .zip format, locate that file and open it. Inside the opened zip folder go to the font folder and open it. Inside the font folder locate the .ttf file. Double click the .ttf file and you will be prompted to install into Font Book. Install the font into Font Book.

Step 5 - "Usage" Load up Photoshop or Illustrator and create a new canvas. Simply use the Type Tool > Choose your font > Use associated values in Customize Codes tab or if you entered in your own custom values use those and your icons should start appearing.

In those 5 steps you should be off and running using Fontello in your design work.