Preview Fonts In Adobe Creative Suite With The Free FontShop Plugin

At the heart of great graphic design is great typography. So in thinking how to get more and better type into the hands of type users everywhere, FontStruct – who developed the plugin for FontShop.

FontShop CS Plugin Beta tutorial for Photoshop from FontShop on Vimeo.

What is the FontShop Plugin, and what does it do?

Rob Meek | "The plugin is a new panel available in Adobe Photoshop, Illustrator, and InDesign. In this panel you can search and browse through most of FontShop's vast library of over 150,000 digital typefaces. When you find a font you like, you can click it to see a preview of what your artwork would look like if you used that font.

I often refer to an analogy with shopping for clothes online. No matter how good they look on your screen, however detailed the images, you just can't tell what those new jeans are going to look like on you until they're delivered and you try them on yourself. The situation when selecting fonts to fit a project is somewhat similar. You sometimes can't be sure if a font is going to work until you acquire it and 'try it on' directly in your artwork. With the FontShop Plugin this fundamental problem is solved – you can literally try before you buy. I believe this new tool will make font selection a much more enjoyable and efficient process, and will encourage designers to make more adventurous choices."

Previewing Perla in Adobe Photoshop with the FontShop Plugin.

How did the project originate?

Rob Meek | "Out of personal interest, really. In 2010 I was looking for something new to work on. The idea for a plugin for one of the Adobe tools had been bouncing around in FontShop's idea bag for several years, but for one reason or another it had never gone beyond the conceptual stage. I'd always been frustrated by the disconnect between the designers' desktop workspace and the font-shopping space online. When pondering the principle of a technology allowing users to preview FontShop fonts in their own design software, it became obvious that this simply had to be done. I quickly built a prototype, posted an internal video to the FontShop folks, and the excitement spread from there.

I showed the prototype to a student from the local art school here in Berlin. He was very excited and described how the students were actually taught a laborious process for trying out fonts. The process involved rendering large sample images at online font vendors, downloading them, removing background color where necessary, and finally importing, scaling, tinting and positioning the images manually in desktop software. I don't doubt such practices have been more or less universal among designers desperate to preview new fonts in their artwork. Even in pre-digital days type specimens were photocopied, enlarged, cut-up and reassembled to create comps and mock-ups. The FontShop plugin replaces wearisome workarounds with a comfortable, two-click process."

Previewing FF Netto in Adobe Illustrator with the FontShop Plugin.

How was the plugin developed?

Rob Meek | "Design and development of the plugin is done by myself in Berlin. FontShop developers in San Francisco develop and maintain the software which generates the preview images and serves information about the FontShop library to the plugin panel.

Adobe provides quite a nice architecture making it relatively simple to develop extensions which will run across all of their CS Suite software, on both OSX and Windows. Once you dig deeper, each Adobe application is very different however, and has its own minefield of quirks to keep things interesting. For geeks: the plugin is developed in Actionscript 3 using the wonderful Robotlegs framework, with a sprinkling of Javascript on top."

Previewing FF Unit in Adobe InDesign with the FontShop Plugin.

Can you explain in layman terms how the plugin works?

Rob Meek | "The plugin panel is like a mini version of FontShop.com in your browser. It's simple and uncluttered, but still a very powerful way of finding and previewing fonts.

When you choose the preview function, the plugin first searches through the page or document you're working on and finds all the text elements in it. On the basis of this search, the user is offered a choice of 'preview targets' – elements which they might want to temporarily 'replace'. You can temporarily replace all elements in a given typeface for example, or just the currently selected elements. Once the choice is made, the plugin fetches preview images from the FontShop servers. These images are created using the new typeface and they match the original text elements in terms of colour, size, text and other properties. Once the images arrive from the server, the original text element or layer is hidden, and the new preview image is put in its place. The process can easily be reversed at any time with a single click on a Clear button. The plugin doesn't install any new fonts on your system – the previews are just images, not vectors, so they are not editable."

What's next?

Rob Meek | "There are plenty of plans for improvements and new features. Support for previewing in Fireworks documents is currently in the works. Anyone interested in trying a pre-release preview of a Fireworks-enabled plugin should get in touch."

FontShop Plugin overview

Enter a search term in the search box (font name, designer name or foundry name), or choose a category from the dropdown at the top of the panel.

Lists of relevant fonts will appear in the panel. At the bottom of the panel, you will find controls for browsing through multiple pages of font results, as well as back and forward browsing history buttons.

Where you see a number to the right of a font you can click on it to see related fonts, usually members of the same family. When you roll over a font you will see a number of additional controls, including an experimental "Find Similar" button for finding visually related fonts.

There is no Undo. Simply clear your current selection, either a specific item or globally, to start over.

The FontShop Plugin allows for custom tagging of the selected fonts for easy reference.

Find more information and download the latest version of the plugin on the FontShop Plugin page.