Category Archives: Website Features

Theresa’s Tips: Desktop, Web, and Mobile Licenses

If you’re starting your project, you’ll want to think about where you will want your typeface to live. Do you want to create mobile applications for the iPhone? Will you need to spruce up your website? Are you creating marketing materials or graphics for a product? So many questions, but hopefully I can help you sort out the type of license you’ll need with this brief overview of what FontShop offers.

When viewing our site you’ll see three types of licenses: Desktop, Web, and Mobile. A desktop license allows a font to live on your computer. The software is installed on your system so that you can use that font in various programs, such as MS Office or Adobe Creative Suite. Most desktops licenses do not allow you to include the font software on your website or mobile app, so additional licenses are needed.

Web licenses allow your fonts to live on your website using the CSS @font-face rule. Fonts that are made for the web can be in different formats, with the most common being WOFF. You can view all webfonts available here.

Mobile licenses are the latest addition and will allow a developer to include fonts into an app. The best part of a mobile license is that once the developers are licensed, they are not limited to the number of apps they can create and the license is perpetual, just like web and desktop licenses. Also, Mobile Fonts have web and desktop counter parts.

Theresa’s Tips: Review

It’s time to highlight and link to all the previous tips, so if you haven’t been following them then here’s what you’ve missed. We started with brief introduction to the formats that FontShop offers then delved into three features of the site: History, Favorites, and the Shopping Cart.

We kept the ball rolling with an overview of the tabs you see on a product page that allow you to view specimens and even similar typefaces.

There is even a way to see if the typeface you want to license supports a specific language.

And if you’ve been following my tips you should now know where to find licenses, get an overview of your shopping cart, and obtain a quote.

One more thing, the My Account section is another area that is overlooked, so we covered that as well. Why? Because FontShop stores all your account information here and if you wanted to change a password, view your license agreement, or download your fonts again then you can.

We also have a Help Desk, where we go over common questions customers have asked us in the past. Now you’re up to date with all the previous post.

Theresa’s Tips: Language Support

Here’s a few tips to see if the typeface you want to license supports a specific language. Make sure you have a phrase or simple word in the characters you need in hand. For example, let’s find out if FF DIN Regular supports Cyrillic characters! The first step is to search for the typeface and then change the custom text to the characters you need supported. Right away we can see that only the PRO version of FF DIN Regular is rendering the text.

From there you can go to the product page and check out the entire Character Set. Typically if a font supports additional languages you’ll see multiple pages that show all the glyphs. In this case, FF DIN Pro Regular has four pages and contains 887 Glyphs that you can view.

Because I’m a triple check kinda of person, I want to go through the pages of the Character Set to make sure the glyphs I need are there.

Done! Everything looks good and now I know that I can create documents in Cyrillic using FF DIN Pro Regular.

Theresa’s Tips: My Account Features

Every time you log on to FontShop, you’ll see a My Account link on the top right hand menu. We’ll go over the different features tucked into this section of our site.

The first section of the My Account link is your basic information. If you need to change your name, password, or email address then just hit edit.

Hitting edit will take you to fields that you can modify. For example if you forget your password and need to change it after we provide you with a temporary one, then this is where you can create a new password. Don’t forget to hit save!

FontShop also stores the information of your previous purchases. Choosing an order ID number will take you to a one page summary of the license you purchased.

The best part of this section is that you can download a copy of the fonts you recently licensed if you need them again. We even store your Typekit voucher code, just in case you change your mind and decide not to self host your own webfonts.

Theresa’s Tips: Help Desk

Have you visited our Help section yet? We’ve filled it with answers to common questions customers have asked in the past. Just click on the HELP link, located on the top right corner of FontShop.com, and you’ll zip on over to the site.

Here are just a few questions we’ve answered:

When and how will I get my fonts after I buy them?

How do I install my fonts?

Are all FontShop fonts available for the web?

Just visit our Help section if you need a quick answer to your question before you purchase a license or submit a request for topics you’d like for us to go over. Also, the Ultimate Answer to the Ultimate Question of Life, The Universe, and Everything is 42.

Theresa’s Tips: Licenses, Your Cart, and Quotes

Before your purchase, pay attention to these three things: Licenses, Your Cart, and Quotes. We will use FF Meta as the example and start with Licenses.

End User License Agreements, EULAs for short, are rules to follow when you want to use a font. You’ll want to keep in mind that you are not purchasing the typeface itself, but a license to use the font software. Because we have 100+ foundries that have their own EULA and you might not want to read every single one, we added a shortcut to a product’s EULA at the bottom of their page.

Your Cart keeps track of the number fonts you’ve added and the subtotal provided is the cost of a basic EULA. The most recent additions to your cart will be shown, up to five, and are linked to the product page. Just hit View Cart to see all the fonts you’ve added.

Quotes are easily obtained once you’ve added the items you need to purchase to the cart. Fonts are licensed in blocks of users, you will have to enter the number of computers that you will need to support, and the cart will automatically calculate your subtotal. The default number of users is the cost of a basic EULA.

If your company is growing, you can always extend your license to support additional computers by contacting us. We’ll also answer any additional questions you may have before your purchase. Whew! That was a lot to cover.

Theresa’s Tips: Specimen, Gallery, and Fonts Like This Tabs

For every product page on FontShop.com you’ll see three tabs: Specimen, Gallery, & Fonts Like This. These tabs are helpful product guides which can inspire potential use. Let me walk you through them using Estilo Script as the example. We’ll start with the Specimen tab.

Within the Specimen tab there are three choices: Display Sample, Text Sample, and Character Set.

Display Sample will show how your typeface will look at Display sizes. The text is a static, but you can see how the typefaces will behave in larger sizes.

Text Sample will display the typeface in a paragraph.

Character Set will show every glyph that is available within the font that you’ve selected. A small arrow within the glyph’s box will appear if there are alternates available for that character. Click the arrow to preview the alternates.

Gallery provides real world examples submitted by our customers and staff.

Fonts Like This is our hidden gem. Here you’ll find alternate typefaces that have similar qualities. If you ever need an alternate to Helvetica, its just a tab away!

FontShop Friday Five: Launches & Updates

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.

Introducing Subsetter

We were excited to announce the launch of FF Subsetter this week, a new tool that can significantly reduce the size of your Web FontFont files. Give it a try!

OpenType Features Added to Sample Toolbar

Phase II of our sample toolbar overhaul went live this week and we’ll hope you enjoy. You can now preview OpenType features of a font before you buy.

What’s Up with FontBook?

Like the Go-Go’s, our lips are sealed, but we can’t help but notice a new splash page on FontBook.com. Go ahead, sign up for updates.

New Font Samples in Newsletter

Did you miss our latest newsletter on Wednesday? Read it here. Then check out the new fonts from Font Bureau, Letterbox and Sudtipos.  You can subscribe to newsletters on this page to get this font deliciousness in your inbox twice a month.

On the FontFeed

Yves Peters looks at TypeCon in New Orleans, Type]Media 2011 grads, and a type-inspired commercial.

Friday Five Fonts:  Terital United by Letterbox and Salvo Sans Black by Font Bureau

Try Subsetter to Reduce Web FontFont File Size

Subsetter was designed with the needs of both web designers and developers in mind. Its purpose is simple — reduce the file size of your Web FontFonts to make your websites faster, optimize bandwidth usage, and reduce high-traffic costs. Subsetter allows you to strip out extraneous glyphs and data that you may not need, like unused language characters, punctuation marks, and kerning information. It will create a new, lighter webfont file tailored to your website.

On July 20, FontFont will be releasing an upgraded Web FontFont collection. To further optimize your Subsetter experience, we encourage you to re-download your Web FontFonts after July 20 to get the improved versions. This will ensure that you end up with a smaller file size, additional optimization for Microsoft’s rendering API DirectWrite, and improved vertical metrics for consistent baseline positions in all browsers. Upgraded Web FontFont files will be available at no additional cost.

You can reduce your Web FontFont file sizes in a matter of moments with Subsetter’s easy, three-step process.

  1. Upload a Web FontFont.
  2. Strip out glyphs and data that may not be needed for a particular site, like unused language characters, punctuation marks, and kerning.
  3. Download your optimized font file.

Grab FF Nuvo Web for free and give Subsetter a try. Stay tuned to the FontFeed this week for a more in-depth look!

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.

Follow

Get every new post delivered to your Inbox.

Join 51,460 other followers