Category Archives: Website Features

New Feature: OpenType Feature Controls

In May, we announced a complete overhaul of our custom sample text toolbar. Phase One included the introduction of our sample text selection menu, and our new color selector. Today we’re happy to introduce Phase Two: OpenType Feature Controls.

In the sample text toolbar on any page displaying font renders, you’ll now see a new gear icon. Upon clicking the gear, a control panel will be expanded, as seen above. This panel includes a predefined list of OpenType features most commonly included in OT fonts, as well as a few dropdown menus containing additional features that are grouped by relevancy. Note that on single font pages, like that of FF Chambers Sans OT Regular, features that are not included in the font will be grayed out and unselectable.

To view your sample text with an OpenType feature applied, simply select a checkbox or menu item. The rendered image will automatically update with your OT feature applied, if any applicable characters are present in the sample string. FF Chambers Sans OT Regular, for example, contains Swash caps alternates:

Please note that not every selectable OpenType feature will affect your rendered sample. Most OT features only affect a subset of characters within a font, and if they are not present in your sample string, no glyph replacement will take place. You can view which glyphs are included in each OpenType feature by clicking the Character Set tab on a single font page and selecting a feature from the list. You can also learn about each feature by hovering over the feature name.

Just as with the color selector, the OT feature controls can be collapsed using the Hide Controls button. Unlike the color selector, your selections will not be persistent when navigating through to other font pages, as each font will have differing available OT features.

While we’re very happy with the status of the OT feature controls and wanted to let you all get your hands dirty with it, we are still working out some of the kinks. If you notice anything awry, let us know in the comments.

Gallery Picks: June 2011

Last week we told you about our Gallery Bookmarklet and hopefully you’ve been on the hunt to add images to grow the FontShop gallery. At the end of each month we’ll be highlighting a couple of images we like from the gallery, so make sure to keep those finds coming!

FF Scala sails off the page:

Source: www.hyatt.com

You can’t help but do a double-take at brassy Zamenhof:

Source: www.behance.net

Finally, ARS Maquette plays a major role in all the materials for this campaign. We like it being a part of our lives too!:

Source: www.flickr.com

FontShop Friday Five: Growing Galleries & Hidden Glyphs

We know you’re busy and the Internet is a crowded place, so we’ll try to give you a little reminder on Fridays of what’s going on out there. Below please find five recent FontShop-related threads that you may have missed.

Hey there Fontspotters!

Did you know you can help grow the FontShop gallery? Check out how here.

A Different Kind of Font Face

We’re loving the hidden glyphs in designer Łukasz Dziedzic‘s creations.

Stylish On Screen and Off

In last week’s Webfont Wednesday we reviewed the The Chicago Manual of Style Online  and this week we take a look at the equally gorgeous print edition, using FF Tisa.

Speaking of Books…

This week’s Webfont Wednesday examines Designers & Books‘ use of FF Bau Web.

On The Font Feed

Yves Peters tackles the many disappointing summer blockbuster posters, and the few hidden gems, in this month’s Screen Fonts.

Friday Five Fonts: Penna by DSType and Altis by Typolar

Capture Fonts in the Wild for the FontShop Gallery

We can all agree – there’s a lot of Internet out there. Just a short time browsing, and your eyes will take in many examples of the thousands of fonts at FontShop.com alive on sites.

We know webfonts only represent a small segment of typography on the web. There are images of digital type samples, rendered type, and of course photos of fonts out there in the real world. We do what we can to spot these and put them up in the FontShop Gallery.

But did you know there’s a way for you to participate too? It’s simple. Next time you’re in the gallery page, click on “Submit images to the gallery.”

If you’re not already, you’ll be prompted to log in. Once you’re all set, you’ll see a button for our gallery bookmarklet. Just drag to your toolbar to add the bookmarklet to your browser.

Then comes the fun part! Next time you’re on a website and spot a font in the wild, click the bookmarklet. It will automatically highlight available GIFs, PNGs, or JPGs. Select the one you’d like to submit and tell us a little about why.

Images are sent to our staff for approval and we publish the best submissions daily.

Once your image has been approved and categorized, you’ll see it on our gallery page. You’ll also see it on the gallery page for the particular font you spotted, under the Gallery tab on every font page.

Have you used the bookmarklet tool? Leave your feedback in the comments!

FontFonter Update: Preview Web FontFonts on Any Site

Almost a year ago, we first announced FontFonter, a tool which allows you to temporarily replace sans and serif fonts on almost any website with a selection of Web FontFonts. Since then, FontFont has greatly expanded its Web FontFont selection, and that expansion has carried over to FontFonter: you can now preview over 40 Web FontFonts, ranging from trusty standbys like FF DIN Web, to some of the newer designs like FF More Web and FF Sanuk Web.

The process is simple: Go to FontFonter.com, type in a website URL, and FontFont It! You’ll then be able to specify which Web FontFonts you want to preview in a control panel at the top of the page; below will be the website you entered, with the chosen fonts replacing the default fonts used for that website. You can choose to replace all fonts with a single Web FontFont, or you can specify replacements for sans and serifs, respectively.

(Note that FontFonter doesn’t quite work as expected on 100% of sites. It will not work with secure sites [https], and will occasionally conflict with some sites’ Javascript or other code.)

Here are some examples to entice you:

FF Clan Web on Apple.com

FF Milo Serif Web on Google.com

Lukasz Dziedzic‘s serif and sans siblings FF More Web (navigation, headline) and FF Good Web (body) on Guardian.co.uk

FF Spinoza Web (navigation, headlines) and FF Basic Gothic Web (body) on NPR.org

FF Suhmo Web (headlines) and FF Hydra Text Web (body) on printmag.com

FF Chambers Sans Web on Flickr.com

FF Sanuk Web on tdc.org

New Feature: Enhanced Custom Sample Toolbar (Beta)

We are happy to announce today that we’ve rolled out Phase One of our enhanced custom sample text toolbar. The toolbar has been rebuilt from the ground up, and now includes some new user-friendly features to enhance your font browsing experience. Phase Two is coming soon now live, which introduces OpenType feature support. Scroll down for more info.

Updated sample text and size menus

As always, you can enter your own custom sample text, and our font samples will quickly update with your specified text. We’ve also added the option to select one of a number of preset samples, including text set in German, Central European (in this case Polish), Cyrillic, and Greek.

Note: If a font does not contain support for these languages, placeholder glyphs from the font (or, in some cases, empty space) will instead appear. We’re working on making this clearer and prettier.

We’ve also updated our point size selection menu, which will now allow you to input a custom point size value in addition to selecting from predetermined sizes.

Color selector

We’ve also added a color selector to the toolbar. When you click the icon, you are presented with two color wheels and hex inputs: one for foreground color, one for background color. To use the color wheel, first click in the square color selector to specify hue, saturation and lightness, then use the color wheel to fine-tune the hue. When colors have been selected, the toolbar icon will reflect the chosen fore- and background colors, respectively, just as you may be familiar with from other applications. You can collapse the color selectors by again clicking the icon in the toolbar, or the Hide Colors button (this has been replaced by a Hide Controls bar below the expanded controls, which will collapse the expanded area) — your chosen colors will still persist from page to page after you’ve closed the menu.

After specifying custom text, point size, and/or colors, your samples will update automatically after a moment. We’ve beefed up our rendering service, so samples should update lightning-quick.

OpenType features

In the sample text toolbar on any page displaying font renders, you’ll now see a new gear icon. Upon clicking the gear, a control panel will be expanded, as seen above. This panel includes a predefined list of OpenType features most commonly included in OT fonts, as well as a few dropdown menus containing additional features that are grouped by relevancy. Note that on single font pages, like that of FF Chambers Sans OT Regular, features that are not included in the font will be grayed out and unselectable.

To view your sample text with an OpenType feature applied, simply select a checkbox or menu item. The rendered image will automatically update with your OT feature applied, if any applicable characters are present in the sample string. FF Chambers Sans OT Regular, for example, contains Swash caps alternates:

Please note that not every selectable OpenType feature will affect your rendered sample. Most OT features only affect a subset of characters within a font, and if they are not present in your sample string, no glyph replacement will take place. You can view which glyphs are included in each OpenType feature by clicking the Character Set tab on a single font page and selecting a feature from the list. You can also learn about each feature by hovering over the feature name.

Just as with the color selector, the OT feature controls can be collapsed using the Hide Controls button. Unlike the color selector, your selections will not be persistent when navigating through to other font pages, as each font will have differing available OT features.

Try out the new sample toolbar on any page you find samples. And stay tuned for future enhancements.

Known Issue with Facebook Registration on FontShop.com

UPDATE 5/12/11: This issue has been resolved and Facebook registration has been re-enabled. Thank you for your patience!

We’ve temporarily disabled the option to create a new account on FontShop.com with your Facebook account. This prevents a redirect loop which is being caused by a bug on Facebook’s side. Customers who have previously created accounts with Facebook are still able to log in. You may still create a new account by completing the “Create an account” fields on our registration page. Should you choose to sync this with your Facebook account in the future, you can do so automatically once the bug is fixed (provided your email is the same as the one associated with your Facebook account).

Thank you for your patience. We will restore things back to normal once a fix comes through from Facebook.

Try Out and “Like” FontShop’s Facebook Integration

Do you adore Tiina Professional? Want to tell the world about Calypso I Heavy? Now you can just click the Like button at the top of each product page and a link to your devotion will appear on your Facebook wall. While you’re clicking away, don’t forget to like FontShop on Facebook as well.

Furthermore, if you’re looking to simplify the process of logging in or registering for your FontShop account, we’ve got you covered. Want to avoid the forms and get straight to the fonts? The new “Login with Facebook” option on FontShop.com will connect you with just one click.

For returning customers, this option will allow you to merge your existing FontShop account with your Facebook, if your emails used for both are the same. You’ll still experience a secure log in to access all your account information, but without the need to remember multiple passwords. Additionally, new customers can now register for the site simply using the Facebook button.

Once you’re logged in, you can “like” individual fonts and share them with your Facebook friends.

Not a fan of Facebook? That’s okay. You can still continue to log in and register using the traditional form.

We’d love to hear what you think about these site changes. Please leave your comments for us below.

Three new features that will make your job easier

Favorites Tagging

Ever since we released FontShop.com Favorites, users have asked for the ability to group or tag them. We heard you. Introducing favorites tagging. After adding items to your Favorites page, simply click “Add a tag” to categorize fonts by client, project, or your own personal keywords. The possibilities are wide open — any word or set of words will do. Then click a tag at the top of the page to filter your favorites. We’re so excited about this feature that we’re unleashing it in beta mode. Let us know what you think as we make improvements in the coming weeks.

Typographer’s Glossary

We launched the FontShop Education Page last month and we’re overwhelmed by the response. The four docs and TypeTips Twitter feed produced some of the most positive and widespread feedback in our history.

Now, just in time for fall semester, comes a new Education doc: the Typographer’s Glossary. Our page featuring typeface anatomy and typographic terms has long been a favorite among educators and design professionals. This expanded and enhanced edition features new terms, updated descriptions, illustrated examples (click the images to enlarge), and a PDF optimized for printing or viewing on portable devices like the iPad, iPhone, and iPod Touch. Students and teachers: take the Glossary to school and never be at a loss for words. Pros: learn the lingo and show clients that you know your stuff.

Don’t forget our educational discount. Register using your .edu email address and use code EDUCATE10 to receive a 10% discount at checkout.

Amazon Payments

Not only do we want to make choosing fonts simpler with tips on type selection, we’re also always looking for ways to simplify the purchase process. Have an Amazon account? Now you can buy fonts at FontShop.com without having to type in all that credit card and billing information.

Once you’re at the Payment Information step in the checkout process, just select the “Amazon Payments” option in the payment info. Click “Purchase” and you’ll be asked to confirm your credit card number, billing address, and total amount at Amazon.com.

After your transaction has been approved you’ll return to FontShop.com where your fonts are ready to download. You’ll receive an email confirmation from both FontShop and Amazon. This payment method is quick and entirely secure.

FontFonter: Try Web FontFonts on Any Website

Ever since we released Web FontFonts you’ve been asking for a way to preview them in a live environment. It took us a while — we wanted to develop something that works well for a variety of needs and different kinds of web content — but we think you’ll like it.

Introducing FontFonter, a quick, easy way to see the impact of Web FontFonts on nearly any site that exists on the web right now. Want to see how Web FontFonts change the look of your favorite site? FontFont it! Spec’ing webfonts for an upcoming project and want to sample them in the design itself? Just enter a web page address in the field and FontFont it!

FontFonter uses custom CSS and other techniques to temporarily replace a site’s font styles with Web FontFonts.

FontFonter has been in private beta for just a few days and we’ve already seen some great applications beyond the sample sites we suggest on the start page.

Before and after: see the New York Times in FF Meta and FF Meta Serif.

Users are throwing the tool at their own blogs to see if it’s time to make the switch away from humdrum Georgia and Verdana. Others are generating detailed, live specimens of Web FontFonts using Tim Brown’s Web Font Specimen (here’s FF Quadraat Web).

We’re launching FontFonter with a limited selection of the hundreds of Web FontFonts available. Expect more soon. Give the tool a spin and tell us how you’re using it. Found a site where a particular FontFont works especially well? Let us know!

Introducing FontCase 1.5: Auto-Activation, improved performance, and more

FontShop and Bohemian Coding are happy to announce FontCase 1.5, a free update to the award-winning font management app for Mac OS X.5+. FontCase users can download the update from their FontCase app menu. Haven’t yet tried FontCase? Download the 15-day free trial now!

FontCase 1.5 introduces a number of exciting features and enhancements, including:

Auto-Activation

If you open a document which specifies fonts that are not active, FontCase will jump into action and auto-activate those fonts. You can see which of your fonts have been auto-activated in a new sidebar filter. When you close FontCase, any fonts that had been auto-activated will be deactivated.

FontCase Auto-Activation works in most apps, including Adobe Creative Suite. (InDesign requires an additional step: simply hit option-I in FontCase to activate the fonts specified in your topmost InDesign document.)

Duplicate Font Handling

FontCase now detects all of your duplicate fonts and conveniently groups them in a new sidebar filter. You can see which styles are duplicated, along with the location of the duplicate files, and you can easily select and deactivate them. FontCase will warn you

Improved Performance and Efficiency

FontCase 1.5 shows a marked improvement in launch time and overall responsiveness over previous versions. Preview caching is also now performed more efficiently, saving disk space.

Automatically Import Missing Fonts

When FontCase launches, it will check if new fonts have been installed using other font managers. If so, it will import them into your FontCase library.

Check out the FontCase page for more features and to download your free trial!

Follow

Get every new post delivered to your Inbox.

Join 59,372 other followers