Finding the perfect font is hard. And while the shops on Creative Market do an amazing job of creating screenshots and product previews that show off inspiring ways to use their fonts, we wanted to go one step further. So today we're excited to launch custom font previews to make browsing and shopping for fonts even easier!
You can now test-drive each of the 1200+ fonts available on Creative Market, and even set your own custom preview text (or use the default Zombies pangram) and adjust font sizes so you'll know exactly how it's going to look before you buy.
To check it out, head on over to the Fonts category page to browse the new font preview layout.
Once you find the perfect font, click through to its individual product page to see a custom preview of each font in the package, including available weights, alternate versions, and more.
Building this new feature was a big team effort. Both the design and the feature itself have been a passion-project for Gerren, an active type designer and font aficionado himself. "Designing a typeface, kerning it properly, and then programming it into a font is hard work, so we wanted to help type designers show off the complexity of their products inline on the product page with this new font preview," Gerren says. "We've wanted to build this feature since we opened the doors to Creative Market last year, because we love to buy fonts and know how valuable it is to be able to try out a client's name or blog post header in the font that you're looking to buy."
The technical magic behind our new font previews was a joint effort by both Brian and Josh. Josh focused on building the backend font generation tool, where he says "generating consistently useful, high-quality font preview images from a large collection of user-generated fonts was a challenge, but playing with the final product live on the site makes all the hard work worthwhile". Meanwhile Brian built the front-end experience that makes the tool fun, easy, and delightful to use, and also rebuilt the way we handle product files for an even better experience across the site. He notes that "when processing files, we now have zip inception abilities – we can see files in zips within zips. This has a sweet side effect: you can now peek inside zip files inside each product." And if you're interested, stay tuned for an upcoming post with more on the technical details behind how we pulled this feature off.
You've probably seen the phrase "The quick brown fox jumps over the lazy dog" on font tester tools before, but did you know that it's called a "pangram"? A pangram is a phrase that contains all the letters of the alphabet, which turns out to be useful to preview each character of a font.
Here's a few other examples of pangrams:
- When zombies arrive, quickly fax judge Pat
- The five boxing wizards jump quickly
- Fox dwarves chop my talking quiz job
- Two driven jocks help fax my big quiz
- Five hexing wizard bots jump quickly
- Pack my box with five dozen liquor jugs
We're currently using "When zombies arrive, quickly fax judge Pat" as the default pangram on Creative Market, but now we need your help! Post an original pangram in the comments below and we'll pick the best to use on the font preview tool throughout the site. And to help you out, here's a tool to help you create your own pangrams: http://windowseat.ca/pangrams/.
And as always, happy creating!