December 18th, 2013 by Amanda Paull
Before purchasing anything, test web fonts with FontDropper.
We’re bringing you the latest edition of Let Creativity Flourish, a series that delivers innovative tools and tips dedicated to helping you design a more beautiful world. This month, we’re featuring FontDropper, our bookmarklet utility that offers you the easiest way to test or design with web fonts from WebINK. You don’t need to be a WebINK customer and there’s nothing to download. FontDropper is free and lives right in your browser!
“Try before you buy” is great, especially when it comes to type.
Typography is one of the most important elements of design, especially when it comes to the web. Investing in new and beautiful web fonts will help your design stand out online. At Extensis, we want you to invest in the right fonts for your work. That is why we developed FontDropper. This easy-to-use and extremely accessible tool can take the guesswork out of purchasing fonts, and help you streamline your design process.
Before taking the plunge with a new web font, it’s great to know what it’s going to look like on the page. Put our growing WebINK library to the test and experiment with over 5,000 web fonts on any website with FontDropper.
This impressive tool lives in your browser and lets you swap out web fonts on live sites. Simply visit the website whose fonts you want to change and start FontDropping. No changes are made to source files—all substitutes are made in the local copy displayed in your browser. Just a few clicks and you’ll see your changes instantly. Try fonts and adjust size, color, spacing and more until you find the perfect new look. Set it up in your page’s code to make it stick.
FontDropping: How it works
Just a few clicks to get started and your experimental changes will appear instantly.
1. Visit the FontDropper page on our website. Drag the FontDropper bookmarklet to your browser’s bookmark bar.
2. Navigate to any website you’d like to experiment with and click the FontDropper bookmark.
3. Select a desired web font from the FontDropper palette and drag and drop it over any live text on the web page.
4. Use the Tools tab to change font style properties until you are happy!
FontDropper is supported on Chrome 4+, Firefox 4+, Safari 4+ and Opera 12+.
FontDropper in Action: Exploring the top WebINK web fonts of 2013
The many ways to apply FontDropper
Now you can see how FontDropper cures the type-driven curiosity in creative, but it can also streamline the design workflow. This easy web font experimentation tool can benefit both you and your client. Save time and resources by applying FontDropper in the following, real-world scenarios:
Typography Directive from the Top
Are you working with a subsidiary company that got some new brand guidelines from headquarters? Want to see how the new type is going to look before implementation? Visualize the refresh with FontDropper before you commit any changes to the code.
Brand Identity Projects
You’re working on brand identity development for a company and you’ve got some stunning options for brand typography. Take your type exploration on a test drive on their current live site, or one you admire, with FontDropper. This will help visualize the creative ways you can take the company’s branding first-hand.
Type Refresh for a Whole New Look
Want to update the typography of your web presence without redoing the user experience, graphic design or other brand assets? Give your website a type makeover by choosing new fonts that exude your brand’s personality. Explore your type refresh options in a flash with FontDropper.
Paint it Black
Do you see a red door and want to paint it black? Visit a favorite website, but think the typography needs some love? FontDropper is the tool for the job. Maybe even share it with the company or organization to inspire them to make a change (or hire you to do it).
Pick and Choose
Have a web design you really admire but think the type needs some work? Before you go implementing something like it yourself, see if a font exchange would make it better. Maybe you’ll create something more stunning than the original.
Explore with no strings attached
FontDropper lets you preview web fonts as easily as you’d try different fonts in other design applications. Explore the typography possibilities of any website with FontDropper. Test-drive all of our web fonts on any site, and see what they look like in place.
Was this advice helpful? What do you think about the tools? Share your thoughts and let us know how you’re utilizing FontDropper by commenting below. The WebINK team who developed FontDropper would love to hear what you think about the tool. Shoot us a note at firstname.lastname@example.org with your ideas, comments and thoughts.
Stay in the loop and let us inspire your work! Follow us @webink on Twitter, where we share fun and useful stuff we like—and hope you like too. Also follow us @extensis on Twitter and Facebook for the goods on events, design stuff and tools/services like Universal Type Server, Suitcase Fusion 5, Portfolio Server, Digital Asset Management and more!
Keep up the beautiful design, and be sure to check back for another edition of Let Creativity Flourish. Every month we’ll have new insider information devoted to honing your skills and utilizing resources to the fullest so your designs can truly flourish.