fonts.com blog
Posts Tagged ‘@font-face’

by Johnathan Zsittnik

Maytag is well-known not only for its durable appliances but also for its commercial-grade parts. When assembling its latest website design, the manufacturing giant once again invested in high-quality parts – this time, assembling headlines with the Neue Helvetica® typeface family.

Laundry and kitchen appliances take center stage on the site’s home page. Accompanying headlines reinforce Maytag’s reputation for quality while Neue Helvetica Bold Extended ensures the message comes through loud and clear.

Maytag Website

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.



by Johnathan Zsittnik

While much of our time goes to releasing and optimizing our collection of Web fonts, we’re always working hard to add new features to the Fonts.com Web Fonts portal. Today, we’re happy to unveil a couple of our most requested features: annual subscriptions and German language support.

Our new annual subscriptions are perfect for those who are no longer just experimenting with Web fonts and are ready to take the leap. Choosing an annual subscription will reduce the frequency of billing for you and your clients while providing a nice price break. An annual subscription is just over eight percent less expensive than a year’s worth of 30-day subscriptions.

You may have also noticed that Fonts.com Web Fonts now speaks Deutsch. German is the most preferred language of our users (behind English) so this should come as good news to our friends in Germany, Switzerland and other parts of the world. The site will automatically display in English or German based on the language preference in your browser. You can also manually specify the language or toggle between languages by clicking the name of the language displayed in the right hand side of the navigation. Fonts.com Web Fonts German Home Page

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.



by Johnathan Zsittnik

Yesterday, we opened up the call for entries to the 2011 Web Font Awards. If you’re just learning about it for the first time (and haven’t already guessed), the Web Font Awards is a design competition for websites using Web fonts. Entrants compete for two prizes. Our Community Choice winner goes to the site with the highest rating on webfontawards.com. Anyone can rate a site by creating a free account. Let your voice be heard. Our Judges’ Choice award will be determined American Idol-style by a live panel of judges at the Future of Web Design New York conference in November. Our winners will receive a hefty take that includes a trip to the Future of Web Design London conference in 2012, an iPad® 2 device, a subscription to Fonts.com Web Fonts and other prizes.

If you’re familiar with the Web Font Awards, let me catch you up on what’s new with this year’s competition.

New breed of entrants
A lot has changed in a year. While we’re still in the early phases of adoption, there are far more users and many more recognizable brands leveraging this exciting technology than just one year ago. Visit webfontawards.com frequently to see who.

Increase the power of your vote
Everyone has a vote in our Community Choice award, but not all will be created equal. Make sure yours carries as much weight as possible! In order to stimulate engagement in the competition as well as fair voting practices, we’ve built in some controls that will allow you to increase your influence. Those who contribute designs, vote frequently, vote fairly and share info with us that tell us you’re not a robot, will be rewarded by having their votes worth more.

Share your site
Web Font Awards sharing widgetIf you contribute your design, you’ll find code for a handy promotional widget on your contribution page. Add the code to your own site to present a snapshot of your entry and its current rating to your visitors and encourage them to rate your site. Each submission page also includes a host of sharing tools to promote entrants through the social avenue of your choice.

Once again, we’d like to thank our friends at Carsonified for helping us put on the Web Font Awards as well as our media partners, HOW, Creative Review, Slanted and Novum and our many sponsors.

We hope you enjoy the competition. Now get out there and submit, rate, and enjoy!

 

2011 Web Font Awards

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.



by Chris Roberts

Here’s a ranked listing of Fonts.com Web Fonts’ top 100 most used Web fonts for August 2011:

Neue Helvetica® 87 Condensed Heavy
Administer BookItalic
Univers® 57 Condensed
Neue Helvetica® 77 Condensed Bold
Avenir® 85 Heavy
Garamond 3 Regular
Helvetica® Condensed Bold
Futura® Bold
Garamond 3 Italic
Bauer Bodoni® Black Italic
Neue Helvetica® 35 Thin
Sackers™ Gothic Heavy
Sackers™ Gothic Medium
Neue Helvetica® 55 Roman
Neue Helvetica® 57 Condensed
Neue Helvetica® 75 Bold
Avenir® 35 Light
Avenir® 65 Medium
Avenir® 55 Roman
Neue Helvetica® 45 Light
Trade Gothic® Bold
Futura Medium
Trade Gothic® Condensed Bold 20
Trade Gothic® Condensed Bold #20, Ext
Avenir® 95 Black
Neue Helvetica® 25 Ultra Light
ITC Legacy® Serif Bold Italic
Avenir® 95 Black, Ext
Futura® Book
Linotype Didot® Bold
Linotype Didot® Roman
Linotype Didot® Italic
Neue Helvetica® 67 Condensed Medium
Linotype Univers® 420 Condensed
PMN Caecilia® 75 Bold
Linotype Univers® 620 Condensed Bold
Futura® Bold Condensed
Neue Helvetica® 47 Condensed Light
PMN Caecilia® 85 Heavy
Linotype Univers® 320 Condensed Light, Ext
PMN Caecilia® 76 Bold Italic
Futura® Medium Condensed
Univers® 47 Condensed Light Oblique, Ext
Futura® Heavy
Neue Helvetica® 37 Condensed Thin
Monotype Grotesque® Condensed
ITC Avant Garde Gothic® Book
Avenir® 45 Book
VAG Rounded™ Black
Neue Helvetica® 45 Light, Ext
Neue Helvetica® 65 Medium
Avenir® 55 Roman, Ext
Rockwell® Bold
VAG Rounded™ Bold
Neue Helvetica® 55 Roman, Ext
Trade Gothic® Roman
Felbridge™ Regular
Neue Helvetica® 63 Extended Medium
Trade Gothic® Extended Bold
Neue Helvetica® 53 Extended, Ext
Helvetica® Condensed Bold, Ext
Neue Helvetica® 73 Extended Bold, Ext
Frutiger® 65 Bold
Neue Frutiger® Light
Eurostile® Next Regular
Eurostile® Next Extended Regular
Eurostile® Next Extended Bold
Neue Helvetica® 65 Medium, Ext
Eurostile® Next Extended Semibold
Eurostile® Next Semi Bold, Ext
ITC Avant Garde Gothic® Medium
Frutiger® 55 Roman
ITC Avant Garde Gothic® Bold
ITC Avant Garde Gothic® Demi
Trade Gothic® Light
Neue Frutiger® Bold
Neo Sans Regular, Ext
Trade Gothic® Bold, Ext
Neue Frutiger® Book
Univers® 67 Condensed Bold Oblique
DIN Next™ Regular
Helvetica® Light, Ext
Trade Gothic® Condensed 18
Helvetica® Rounded Condensed Bold
Palatino® Sans Arabic Regular
Frutiger® 45 Light, Ext
Neue Frutiger® Regular
Cochin® Roman
Helvetica® Condensed
Trade Gothic® Condensed #18, Ext
Neo® Sans Arabic Regular
VAG Rounded™ Light
ITC Lubalin Graph® Book
Neue Helvetica® 67 Condensed Medium, Ext
Avenir® Next Demi
Avenir® 35 Light, Ext
Neue Helvetica® 75 Bold, Ext
Neue Frutiger® Medium
Helvetica® Bold, Ext
Frutiger® 65 Bold, Ext


by Mark Larson

When the University of the West of England was founded in 1595 (as the “Bristol Society of Merchant Venturers’ Navigation School ”), the font selection they had to choose from was quite a bit smaller than it is today, to say the least. However, when it came to their recent website update, they not only had a vast selection to choose from, but they took the opportunity to implement Web fonts.

Because the university’s mission is to “make a positive difference to our students, business and society”, the university’s website is, in effect, the face of that mission. With than in mind, they chose to use the VAG Rounded™ typeface throughout the navigation elements and headlines on the website. The type’s rounded ends make text appear more informal, imparting a friendly appearance, while still maintaining a professional demeanor.

University of the West of England

University of the West of England


by Johnathan Zsittnik

Whirlpool, well-known for their line of appliances supporting fabric care, cooking, refrigeration, dishwashers and other aspects of daily life, is among the latest major brands to load up on Web fonts.

Visitors to Whirlpool.com are greeted by a Flash® animation highlighting a selection of appliances. A roomy and well-structured navigation keeps things clean and tidy while making it easy to explore the site’s numerous products and categories. The Avenir® and PMN Caecilia® typefaces aids the hierarchy of the nav and helps the site shine.

Whirlpool website using Web fonts

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.



by Johnathan Zsittnik

Goodwin Procter is a recognized law firm with a growing presence across the United States and abroad. The firm was founded in Boston in 1912. Nearly a century later, their corporate headquarters remain in Boston, not far from Monotype Imaging’s center of operations. Good kids. Local kids.

The firm calls on the Trade Gothic® Condensed family to establish hierarchy within their website. The type’s distinctiveness sets headlines apart from body copy, helping to organize the content and direct the eye.

Upon further examination, we find design to be attractive, beyond a reasonable doubt. We’ve also concluded that Goodwin Proctor may be just the team to help us with that cease and desist on use of Web-safe fonts.

Goodwin Proctor website using Web fonts

 

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.



by Alan Tam

Face it – the explosion of rich multimedia, social networks and mobile applications have left you up in arms in establishing a consistent brand, let alone an identity, across a vast and fragmented digital medium. The abundance of rich video content, the extensive and complex array of mobile apps across mobile OS and marketplaces, and the proliferation of social media and networks (like Facebook and Twitter) have made it increasingly challenging to establish a cohesive and consistent, yet distinctive identity and brand online.

With the introduction of HTML5, organizations are presented with a plethora of new and exciting opportunities to address and tackle the challenges. One of the most simple, prominent and elegant components that will be supported in HTML5 is Web fonts via @font-face with CSS3. Web fonts are already supported in browsers today via @font-face with CSS (to learn more about the history and current implementations of @font-face, click here). Web fonts are by far one of the easiest and most crucial elements that can help organizations achieve a consistent brand online across platforms and devices. If fact, if you distill the essence of a brand or identity down to its most basic level, it starts with the typeface. The type builds the name, the type builds the logo, the type builds the brand and identity.

While delivering a consistent brand across mediums in the non-digital world has been achieved through hundreds of years of technology and development, the same cannot be said for the digital medium – yet. HTML5 will be the first vehicle that will standardize the proliferation of Web fonts via the @font-face CSS across digital mediums, across all devices and platforms. Through @font-face, Web fonts will enable brands to establish and deliver a consistent identity online that extends from the desktop to tablets to mobile devices in various use cases that can include the following:

In addition to broad and consistent reach across devices, the adoption of Web fonts also brings the following benefits to the use cases:

  • Full searchability by Find (ctrl/command-F)
  • Accessibility to assistive technologies like screen readers
  • Text is translatable, through in-browser translation or translation services
  • CSS has full ability to tweak the typographical display: line-height, letter-spacing, text-shadow, text-align, and selectors like ::first-letter and ::first-line

While HTML5 nears final ratification, it can be assured that the surge of innovation will drive accelerated adoption and implementation of the new standard by Web browsers, leading first with mobile and tablet platforms and followed shortly by the desktop. This will be one of the first, if not the first, web standard that will be driven from mobile to desktop as consumer engagement with digital content shifts (or has shifted) more toward tablet and mobile devices than the desktops, creating an even a greater sense of urgency for businesses to develop and extend a consistent brand and identity across the fragmented mobile environment.

Monotype Imaging has been on the forefront of delivering desktop and Web fonts to brands, enabling them to extend their trusted identity consistently across digital and non-digital mediums and across a variety of use cases. Take a look at some of the market leading brands who are already leveraging Web fonts today:

Honda CR-ZHonda CR-Z
Hershey'sHershey’s
HyundaiHyundai
TCBYTCBY
TravelSmartTravelSmart
PoweradePowerade
Coke and PepsiCoke & Pepsi
TobleroneToblerone
McLarenMcLaren
Historic Hotels of AmericaHistoric Hotels of America

And many more!

To learn more about how Web fonts can help your business or to choose the Web fonts best for you, please visit webfonts.fonts.com.


by Jason Pamental

In my last article I talked about the importance of font fallbacks when using Web fonts – though truth be told, it’s important no matter what. But simply adding fallbacks to your CSS leaves a lot of loose ends lying about that are just waiting to trip up you and your users. Here we’ll go through exactly what to do, how to do it and why it’s important to address getting your fallback embedding and styles sorted out and just a bit more complete.

Adding the JavaScript code to your page to add the fonts is a one-line affair – but utilizing Font Events requires a few more. Then you have to ensure you’re making use of those Font Events in your CSS in order to mitigate the vagaries of how browsers render the page during the font loading process – which may be nearly instant, but often will still be noticeable and even a bit jarring. What’s more, while increasingly infrequent, lack of JavaScript (JS) support does occur — and if you don’t account for that with a ‘<noscript>’ option to load your Web fonts, all your efforts will be for naught. All this may seem daunting at first, but fear not! It’s not really that much extra effort and we’re about to go through it, sample code and all.

So let’s review what happens when a page is requested, how it loads and where the pitfalls occur.

  1. A user requests a page from your site
  2. The page begins to load, including a reference to a JavaScript file to embed the fonts. One of two things happens when the script loads:
    1. JS is enabled, so the script runs –OR
    2. JS is not enabled, so nothing more happens (unless you have cleverly inserted something in a '<noscript>' block below)
  3. Next, one of three things occur:
    1. If JS has run, fonts are loading and Font Events are firing. CSS classes such as ‘wf-inactive’ are being inserted dynamically into your page and you, as a clever designer and/or developer have added to your CSS classes and declarations to help ensure that your text is rendering well both during and after the loading occurs.
    2. If JS has not run but you are indeed clever, the '<noscript>' block containing a link to a CSS file is taking care of loading your fonts and while no Font Events will help mitigate display oddities during the loading process, in a moment or two all will be loaded and displaying according to your design.
    3. If JS has not run but you have not included the '<noscript>' block, while no kittens will be harmed, you will have doomed your users to a far more pedestrian experience likely filled with poorly letter-spaced text set in Arial. You can do better!

Now in the above sequence of events you’ll notice that not only have we accounted for fallbacks should the fonts not load but we’ve even created a fallback scenario for JavaScript not functioning and added a link to CSS that will load the fonts anyway. Very clever indeed. Your mother would be proud. (Unless you have fallen into that last case – but you still have time to redeem yourself!)

For our demonstration I’ve selected a lovely passage from Moby Dick – a tremendous work which also happens to be unencumbered by copyright restriction and therefor an ideal candidate for our use. The PMN Caecilia® and ITC Obliqua™ typefaces made for a nice pairing of headers and body copy, even while imparting a slightly more modern feel juxtaposing the vintage of the text itself. We’ll now dispense with the preliminaries and get down to the business end of things.

Demonstration Page, Fonts Loaded:

Fallback fonts demo - Web fonts on

In order to finish our preparations it’s necessary to accumulate a few bits and bobs of code. You’ll need to log in to your Fonts.com Web Fonts account, go to your project (or create one using this sample one!), navigate to the ‘publish’ tab and copy the two strings presented under ‘Option 1: JavaScript’ and ‘Option 2: Non-JavaScript’. (You will need a Standard or Professional subscription in order to access the Non-JavaScript publishing method). They will look something like this:

<script type=“text/javascript” src=“http://fast.fonts.com/jsapi/f4ed33fe-8f54-42a8-9cec-712422e7fab0.js”></script>

and

<link href=“http://fast.fonts.com/cssapi/f4ed33fe-8f54-42a8-9cec-712422e7fab0.css” rel=“stylesheet” type=“text/css” />

While you’re there, you may as well grab the sample font declarations to use in your CSS:

font-family:‘PMNCaeciliaW01-55Roman’;
font-family:‘PMNCaeciliaW01-56Italic’;
font-family:‘PMNCaeciliaW01-75Bold’;
font-family:‘PMNCaeciliaW01-76BoldIt’;
font-family:‘Obliqua ITC W01’;
font-family:‘Obliqua ITC W01 Italic’;
font-family:‘Obliqua ITC W01 Bold’;
font-family:‘ObliquaITCW01-BoldItali’;

(We’ll work out how to best use this in just a bit)

Finally, you should have a look at this sample code page showcasing the code required to use the WebFont Loader with Fonts.com Web Fonts. While what is presented there will certainly work, my preference is to keep all JavaScript ensconced in the ‘<head>’ section of the page, and it all seems to work there just swimmingly, like so:

<html>
<head>

<link href=“style.css” type=“text/css” rel=“stylesheet”><!– Our CSS file –>
<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/webfont/1.0.21/webfont.js” ></script>
<!– Loads the webfont loader –>

<script type=“text/javascript”>
     WebFont.load({
        monotype: {
          projectId: ‘fcd5b553-f7b9-4b45-9093-4e202e2538dd’
           // replace this with your Fonts.com Web Fonts projectId — don’t forget to          do so below as well
        }
     });
</script>

<noscript>

<!– Use this in as a fallback to no JavaScript being available –>
   <link href=“http://fast.fonts.com/cssapi/fcd5b553-f7b9-4b45-9093-4e202e2538dd.css” rel=“stylesheet” type=“text/css” />
</noscript>
</head>

With that we’ve done several things: we’ve embedded the code to trigger the WebFont Loader, given it your Fonts.com Web Fonts project ID to load, and included the aforementioned clever little bit of ‘<noscript>’ code to load the fonts via CSS should JavaScript not be available. That’s actually all that’s necessary in the page itself. Not so bad, right? Our sample page does have some extra bits in it but those are there to allow us to experiment without CSS and see just how it will look in action. The rest is all in our CSS file. (Well, except for the bits we’ve added for our demo that allow us to turn Web fonts on and off, which is invaluable when you want to ‘tune up’ your fallback fonts. But more on that later.)

Before we dive in to that CSS though, let’s take a moment to more clearly explain why we’re taking the trouble to go through this exercise. Without trying to be flip, it’s important to point out that fonts differ from each other in more ways than simple appearance. Spacing can vary widely, which is why I recommend selecting fallback fonts that more closely match the horizontal scale of your chosen web fonts as much as possible. (For example, the Helvetica® and Verdana® typefaces vary greatly in width.)

Sample Text:

Font comparison

The problem you’ll find is that while the Web fonts are loading, either no text will display at all or it will show in the fallback font and probably reflow your text quite a bit. This is exaggerated further when the Web font selected is drastically different in size. This will cause a jarring redraw of the page once the web font loads fully and the browser updates the user’s window with the re-rendered page. By using Font Events to introduce new CSS written specifically to address the display of the fallback fonts we can adjust with the CSS letter-spacing and font-size declarations to minimize or even eliminate the reflow of text on the page. There is also the nascent declaration of ‘font-size-adjust’ but it’s very unevenly implemented as of yet. (Great exploration of that here: http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/)

Demonstration Page, Fonts Not Loaded (with no CSS correction in place):

Web fonts off, uncorrected

Since we have added Font Events, we can now dive into our CSS. We’ll start with the basic styles for text on the page based on how we want the page to render with our selected Web fonts:

body, caption, th, td, input, textarea, legend, fieldset {
   font-family:“Obliqua ITC W01”, Helvetica, “Lucida Sans”, “Lucida Grande”,   “Lucida Sans Unicode”, sans-serif;
   font-size: 1em;
   letter-spacing: normal;
   line-height: 1.4em;
}

This will be the base, and is applied either once the Font Event ‘loading’ classes are removed or when JS is disabled and the fonts are loaded via CSS instead. However — we want to leverage the Font Events when possible, so we then list this alternate style that is called once the WebFont Loader has inserted the class indicating that Web fonts are loading but not yet active (‘wf-inactive’):

.wf-inactive body,
.wf-inactive caption,
.wf-inactive th,
.wf-inactive td,
.wf-inactive input,
.wf-inactive textarea,
.wf-inactive legend,
.wf-inactive fieldset {
   font-family: Helvetica, “Lucida Sans”, “Lucida Grande”,   “Lucida Sans Unicode”, sans-serif;
   font-size: 1em;
   letter-spacing: –0.015em;
   line-height: 1.4em;
}

Notice a few key things between the first set of declarations and the second: when ‘wf-inactive’ is added, we set the fonts without the Web font listed and adjust the letter-spacing. We could also alter the font-size and increase the line-height at this point. These adjustments were easy to make with our demo page because we’ve added a toggle link to turn the Web fonts on and off. If you give our demo page a look and try it out, you’ll see that it’s quite close – but likely not exact in our goal of ‘no reflow in any browser.’ You may be shocked to hear this, but apparently a pixel is not quite a pixel when it comes to implementing letter-spacing – despite it having been around since CSS1. I know, hard to believe. So we have to fiddle with the fallback values of the second block and test it out in a number of browsers until we are close enough. Mark it down along with horseshoes as one of the few places where ‘close enough’ still scores you points. I’ve done the same in our demo with H1, H2 and H3 headers as examples, but you’ll have to adapt this to your own workflow an CSS in order to ensure that you’ve covered all your bases. Then test, test test! You’ll find that some browsers render letter-spacing smaller, some larger.

Demonstration Page, Fonts Not Loaded (but with CSS correction in place): (image)

Web fonts off, corrected

While one could argue that in order to properly address the page from a progressive enhancement point of view you should actually have your base CSS be the ‘fallback-tuned’ version, but since with Fonts.com Web Fonts you can address the lack of JS with CSS-only embedding wrapped in a standard ‘<noscript>’ block, I would say that this is indeed the proper base writeup, and since it relies upon JS to enable the Font Event classes at all, that the ‘fallback-corrected’ CSS would actually be the ‘enhanced’ bits and therefore should be added only when the Font Events are actually present.

So to put this in practice yourself, follow the samples above and while you’re developing your HTML and CSS, include the handy toggle code from the demo so you can test your adjustments, and simply remove it when you’re done. If you’re developing in Drupal you could even add the toggle as a block with all the necessary code and simply turn it on whenever you need it. The entire demo is available to download – just substitute your own project ID and fonts to give it a try. It’s not too hard, and the benefits will be noticed (or better yet – not noticed) with every page load. Tune away!

View the Demo (tuned the closest in FF, but works in all the browsers I’ve tested)

Experiment on your own! Download the fallback font demo files.


by Johnathan Zsittnik

Historic Hotels of America is an exclusive collection of American hotels that have retained their historic integrity, architecture and ambiance, providing an authentic travel experience for guests to enjoy. These classic properties enjoy one modern amenity: Web fonts. Sabre Hospitality Solutions elected to break free from the restraints of “Web-safe fonts” or the inelegant implementation of Flash® text replacement in preference for the rich palette of Web fonts available from Fonts.com Web Fonts.

The member hotels vary wildly in age, from the 1600s to the more contemporary period of the 1960s. The Sabon® typeface was chosen for its classic form, practicality and suggestion of literary and historical pedigree, allowing it to work with hotels from any of the historical periods featured within the collection. “The Web fonts from Fonts.com were a vital piece of our design strategy, allowing us to broaden our vision to encompass fonts beyond those that have been the traditional mainstay for Web design until now,” said Tavis Tucker, website development manager at Sabre Hospitality Solutions.

Thanks Tavis for the kind words and for being so “accommodating” in the creation of this spotlight on Historic Hotels of America.

Historic Hotels of America using Web Fonts

 

Johnathan Zsittnik
Johnathan Zsittnik is the eCommerce Marketing Manager at Monotype Imaging. Johnathan holds both a bachelor’s degree in marketing and a master’s degree in business administration from Bentley University.


Great type makes sites stand out