Posts Tagged ‘css’

by Chris Roberts Web Fonts now provides advanced features for controlling how Web fonts are loaded into Web pages.

Customers can now use the WebFont Loader, an Open Source JavaScript™ library that provides a variety of options for Web developers to control the Web font loading experience. The WebFont Loader is served through the Google AJAX Libraries API.

The functionality allows developers to deliver a more consistent experience across browsers and tap additional features related to the process of downloading and displaying fonts on a Web page. At various phases of Web fonts loading into a browser, WebFont Loader provides notification of event status. Web developers can then write code to control browser behavior based on the status of events. For example, one popular use is to combat the notorious “flash of unformatted text” (a.k.a. FOUT). A description of WebFont Loader capabilities is provide on the Google Font API website located here: Web Fonts offers over 10,000 premium quality fonts from leading type designers and foundries for license as Web fonts. Web Fonts makes it simple and fast for Web designers and developers to implement Web fonts by adding a single line of code to Web pages. Both JavaScript and non-JavaScript options are available. The WebFont Loader JavaScript library hosted by Google offers an alternative method for loading the fonts and CSS defined within Web Fonts projects.

To get started, you can check out this sample page we’ve created using example code: You’ll also need your Web Fonts project ID. To get your project ID, login to your account and visit the Publish tab. If you’re using the JavaScript publishing method, your project ID is the character string in your line of code just before the .js suffix. If you’re using the non-JavaScript publishing method, your project ID is the character string in your line of code just before the .css suffix.

We hope our customers find this new capability useful. Watch this space for further enhancement to Web Fonts.


by Chris Roberts

Earlier this week Microsoft announced the much anticipated release of Windows® Internet Explorer® 9. Today, I’m happy to announce Web Fonts support for Internet Explorer 9.

One of the first things you will notice is that Web fonts look much better in IE9. This is due to the use of the new DirectWrite subsystem. DirectWrite employs a significantly different text rendering approach than earlier IE browsers, and the results are dramatic. Bottom line, Web Fonts look great in IE9. Enjoy!

by Chris Roberts

PDF Catalog of Hand-Hinted Web Fonts

If you’ve been following the developments regarding “Web fonts”, you’ve probably heard someone complain about the way some Web fonts look in the Windows® operating system. You may have even heard that the problem is more specifically to do with Windows XP. If you really dug deep, you may have read that the most egregious cases are centered on a scenario where a Windows XP user is surfing with a browser that does not have default ClearType® support. And if you are a total Web fonts junky with way too much time on your hands, you may have looked up operating system and browser market share figures and arrived at the conclusion that over 30% of your visitors may fall into this category. Then, you may have been overcome with feelings of nausea, dread and hopelessness.

All is not lost. First of all, time is on your side. XP won’t be around forever. Every day Windows 7 is gaining ground on XP. Someday this will all be nothing more than a poorly rendered memory. Better still, you don’t have to wait for “someday”. There is something you can do today to cure those XP induced Web font blues. Web Fonts now offers over 600 “hand-hinted” Web fonts to help address this specific situation. Among them you will find several classics like Avenir®, Bookman Old Style™, Century Gothic™, Eurostile® Next, Frutiger®, Helvetica®, Trade Gothic® and Univers®.

What does hand-hinted mean? Basically, it means that a real person sat in front of a computer monitor and studied each character at different point sizes, making painstaking adjustments until they were satisfied with the result. But we are not talking about just any person. Hand-hinters are to fonts what sommeliers are to wine. It takes many years to learn to do it well. Every font is different in design and characteristic. It takes a rare and highly skilled expert to get it right.

Monotype Imaging has been in the hinting business since the beginning. Over the years we have accumulated a great deal of font hinting knowledge and talent. We’ve also produced a very large number of expertly hand-hinted fonts. Today, it’s our pleasure to share them with you.

Here’s a link to our hand hinted Web fonts now available on Web Fonts:
Click here

Here’s a link to a PDF catalog of our hand-hinted Web fonts:
Click here

by Steve Lee

The top 5 languages used online are English, Chinese, Spanish, Japanese, and Portuguese. Perhaps more surprising is the fact that 22.6% of Internet users have Chinese as their primary language. Web support for world languages is increasingly being recognized as a key success factor for global enterprises. That’s why we think the promise of Web fonts as a global solution rests on language support.

One of the biggest challenges for Web font providers is to support as many languages as possible. Certain world scripts, such as non-Latin writing systems like Chinese, Japanese and Korean, extend the challenge further because of their large numbers of characters and the burden this places on delivering text quickly to your screen. When you land on a Web page, you expect that the text should display instantly, no matter what the language.

The problem is that large font file sizes can cause slower page load times. To overcome the font size vs. speed issue, different approaches for different fonts that support different languages are needed. The goal is to deliver fonts as quickly as possible and hide the complexity from the user. Web Fonts offers lightning fast delivery for over 40 major languages, including those with gigantic character sets like Chinese, Japanese and Korean. So, how do we do it?

Dynamic Subsetting
Looking closely at Chinese, Japanese and Korean fonts, they each can have thousands of characters, from 10,000 to 30,000 or more. The average Chinese Big5 font with 13,000 characters is about 8MB. A Unicode 6 font has 109,449 characters and can require more than 50 MB. That’s where our Dynamic Subsetting comes in.

We are able to deliver fonts that contain ONLY the characters used on the page, thus dramatically reducing font file size. Our patent-pending invention called Dynamic Subsetting accomplishes this. Here’s how it works: a JavaScript code is placed in the target HTML page, which parses the page and reports back to the Web font servers which fonts and which characters are used on the page. This operation is done in a local machine; a simple POST back is rather uncomplicated and small in terms of size. The process is instant. Upon receiving the fonts and character information, the font servers generates the fonts containing only the required characters.

Without Dynamic Subsetting, text set in three East Asian fonts could require a 30 MB download. Dynamic subsetting reduces the font to just the characters needed to render the page. In this example, the combined file size of three East Asian fonts could be shrunk to under 100K – only 0.3% of the original size. Without Dynamic Subsetting, Web fonts are almost off limits to Chinese, Japanese and Korean fonts.

With Dynamic Subsetting and Web fonts, it’s now possible to overcome several language support challenges that have existed since the dawn of the Web. International portals like Facebook, Twitter and Google can now leverage a variety of Unicode fonts to support world languages online without worrying about which system fonts exist on recipient computers. Another great example are Gaiji characters. Gaiji are non-standard characters that are found in people’s names in countries such as Japan, Taiwan and China. These characters are not available in standard character sets, but are very important for government agencies and large global enterprises. Web fonts which include these characters can be deployed to solve this problem. Similar problems can now be addressed with WGL4 fonts for Pan-European characters, Japanese Ruby characters, Chinese Bopomofo and Chinese Pinyin.

For the first time in the history of the Web, countless culturally and educationally important characters can finally move into the digital age. In these examples, Web fonts don’t just match the language support provided by system fonts, they exceed it, providing a new set of language support capabilities. Web fonts have arrived, and with Web Fonts web designers can now deliver better looking Web sites with improved language support. A truly beautiful global solution.

by Chris Roberts

We are focused on providing Web Fonts users with the best font selection, best language support, and best work flow solution. Today we introduced two new features, based on patent pending technology, aimed at improving the Web Fonts work flow. Our new “CSS Sucker™” and “Import/Export Project” features can be accessed by clicking on the “Import/Export” text link located at the top of the “Work on style sheet” page.

CSS Sucker
If you’ve created a Web fonts project, then you know the most time consuming step is adding CSS selectors. Uncovering all of the selectors hidden in existing CSS/HTML files can be a difficult task, especially if you’re using templates created by others. Then there is always the potential for human error as you hand key selectors into your project. What you really need is an automated tool that can suck in the selectors from your exiting CSS/HTML. Enter the CSS Sucker.

The CSS Sucker lets you automatically load into your project CSS selectors used in existing CSS/HTML files. Enter a URL or upload a CSS file, click the “Import” button, and the CSS Sucker will pull in and display your selectors. Next, simply choose the selectors that you want to use and click the “Add to Style Sheet” button. Click, click and done.

Import/Export Projects
When we were testing Web Fonts, we found that we often needed to reproduce the same projects in several different accounts. After doing this by hand a number of times, we realized that it was not a very fun activity, and prone to human error. We thought that our customers might end up facing the same challenge within their development and client/customer work flow environments. This was the impetus behind our “Import/Export Project” feature.

Released today, the Import/Export Project feature enables a quick and easy method for duplicating Web Font projects across multiple accounts.

Each project is assigned a unique “token”. A token can be used to import a project into any Web Fonts account.  The process is very simple. Paste the token into a field and hit one button. That’s it. Fool proof.

One interesting possible use of the Import/Export feature is theme/token pairings. Theme creators can distribute Web Fonts “import tokens” with their theme templates so that theme users can quickly and easily implement the web font component of the theme. Combine this with the recently announced Web Fonts affiliate program and theme designers could realize a new revenue stream.

We think these new feature will be huge time savers. Please comment below and let us know what you think.

by Allan Haley

A Modern Classic Makes it to the Web

The Futura® typeface family was designed over 80 years ago as fonts of metal type. It was made available for phototypesetting equipment about 40 years ago, and as digital fonts a little over 20 years ago. Today, this important design has made yet another technological leap and is available via Web Fonts.

Many assume that Futura was developed at the Bauhaus and is the embodiment of that school’s teaching. The reality is, however, that Paul Renner, Futura’s originator, had no Bauhaus affiliation. Futura, in many ways, even runs counter to Bauhaus teaching, and was rarely used by Bauhaus designers.

As first drawn, Futura clearly embodied the ideologies of the Bauhaus movement. While the capital letters were patterned after Roman character shapes and proportions, its lowercase was a design experiment that took the “form follows function” philosophy to extremes. Many characters were constructed out of literal geometric and minimalist shapes. The end result was a set of glyphs that may have reflected Bauhaus teaching, but were typographically virtually useless.

Renner submitted his new design to the Bauer Typefoundry of Frankfurt, which accepted the work – with the stipulation that its staff designers could make a “few” modifications to the typeface. Bauer’s designers left Renner’s caps pretty much untouched, but felt obliged to spend considerable time on the lowercase. Here, they did an exemplary job of melding Renner’s philosophy with proven typeface design precepts. The end result was an immediate and overwhelming success in Germany. It wasn’t until after World War II, however, that Futura was introduced into the United Kingdom and the United States.

While Futura appears to be constructed out of strict geometric shapes, it is not. First, as monotone as they may appear, the stroke weights of the design do vary. The most obvious place is where curved strokes join a stem. Here, the strokes are tapered so that the intersection does not look too heavy. Diagonals are lighter in weight that vertical strokes, and horizontal strokes are lighter still. In addition, the inside diagonals of the ‘W’ are lighter than the outside diagonals. If you look very carefully you will also discover that the top and bottom parts of the ‘O’ are lighter than the sides – and that the top is just a bit lighter than the bottom.

In addition, characters like the ‘G,’ ‘H,’ ‘R’ and ‘P,’ which you might expect to be horizontally symmetrical, are actually somewhat high waisted.

Whether a “true” geometric design, or not, the Futura typeface family has proved itself a valuable typographic contributor for the better part of a century. And now, 45 fonts of Futura are available for Web font implementation.

Allan Haley
Allan Haley is Director of Words & Letters at Monotype Imaging. Here he is responsible for strategic planning and creative implementation of just about everything related to typeface designs.

by Chris Roberts

Today we announced the Web Fonts API (application programming interface). The API is intended to allow developers to exercise the capabilities of the Web Fonts portal from within their own applications.

Perhaps the best example is within a Content Management System (CMS). The natural place for Web font styling to occur is directly within the Web content authoring tool. Right now I am authoring this blog post within the WordPress® platform. With the Web Fonts API, a WordPress plug-in can be developed to style text directly within the WordPress UI, just as a user would do within any desktop publishing application. Actually…we did just that. To demonstrate the power and range of capabilities that the API offers, we created plug-ins, modules and extensions for three of the most commonly used CMS platforms…WordPress®, Drupal® and Joomla!®. We have issued them as Open Source, so they can be used freely, improved and extended.

We can’t wait to see what folks create with the API. Information about the Web Fonts API, as well as the WordPress, Drupal and Joomla plug-ins, modules and extensions can be found here:

by Chris Roberts

We just released over 350 new web fonts to the Web Fonts portal, bringing the new total available fonts to over 8,000. Also, our free tier offering now includes over 3,000 font choices! Among the new additions are standards like the ITC Benguiat® and ITC Stone® families, new favorites like the Neo® and Scene® families, plus over a hundred additional Chinese fonts that take advantage of our patent pending technology to ensure fast performance for East Asian web fonts. Much more to come, so stay tuned!

by Chris Roberts

Earlier this week we announced the commercial availability of Web Fonts. Thanks to over 15,000 beta testers, the wealth of feedback collected over the past several months was channeled into the product development process to create a truly user-focused offering. Bolstered by a vastly expanded font selection and raft of new user requested features, we believe Web Fonts combines the best selection, best language support and the best workflow solution to represent the obvious choice for anyone interested in deploying Web fonts. Here are several examples of how you, the user, helped to create the service that we introduced.

More of the “right” fonts
Apparently, when it comes to fonts, there is no such thing as “enough”. “More fonts” was a very common request from our beta users. In response, we have increased our selection from 2,200 to over 7,500 fonts. But quantity is meaningless without quality. We heard loud and clear that your design projects call for “the right fonts.” Professional designers know that fonts like Helvetica®, Frutiger®, Univers®, Trade Gothic®, Eurostile®, ITC Avant Garde Gothic®, Rotis®, and Optima® are typographic non-negotiables when it comes to supporting corporate identity, branding and advertising. These are just a few of the core essentials included among the 7,500 high quality Web fonts that make up this unrivaled collection.  We also heard that Web fonts need to look their best across various browsers and operating systems. All of our Web fonts have been reviewed by Monotype Imaging’s world-class font engineering and quality assurance teams. Using a combination of proprietary font optimization tools and hinting strategies, we worked to achieve the best possible results at every point size and across every operating system and browser combination. Many of our Web fonts have been designed specifically with screen display in mind. Monotype Imaging is committed to innovating new ways to maximize on-screen rendering quality. As quality improvements are made, Web font data will be updated automatically, meaning your websites will always look and perform state-of-the-art. But this is just the beginning. Going forward, every new typeface release from Monotype®, Linotype® and ITC® will also be introduced as a Web font. Additionally, we are working with many of our foundry partners on to bring their collections to Web Fonts. As our selection grows, so will your creative freedom.

Language Support
Our beta testers told us they need to support a global audience. Why would anyone limit themselves to a service that can only reach half of it? We’ve added fonts and technology to enable support for every major language, including patent-pending technology to overcome the challenges of serving East Asian fonts. The majority of our Web fonts include a full Basic Latin-1 character set. These fonts cover popular Western European languages such as Danish, Dutch, English, Finnish, French, German, Irish, Italian, Norwegian, Portuguese, Spanish and Swedish. We also provide a wide selection of fonts that cover a Latin extended 1 character set supporting Croatian, Czech, Estonian, Hungarian, Latvian, Lithuanian, Polish, Romanian, Serbian, Slovak, Slovenian and Turkish. We also offer a variety of world language fonts to cover non-Latin scripts such as Cyrillic, Greek, Simplified and Traditional Chinese, Japanese, Korean, Thai, Arabic, Hebrew, Armenian and Devanagari. It’s a big world. Think global.

Workflow support (don’t make me pay twice!)
This one was a doozey. Users told us that they needed installable versions of their fonts to support their workflow. They explained that their design process did not begin in the browser, but in applications like Adobe Photoshop® and Illustrator®. They make mock-ups and send them to their customers and co-workers as part of the design process. They told us that Web fonts are great, but don’t replace the need for desktop installed fonts in the workflow. Actually, Web fonts increase the need to have fonts installed locally. It’s now more important than ever for Web designers to be able to convince others of the value of using non-system fonts in their Web designs. Bottom line: they need to be able to download the fonts and use them in their desktop applications. Oh…and they don’t want to buy them twice. As you might imagine, we had some animated internal debate over this one. In the end, and as should always be the case, the customer’s need drove the decision. We decided that we would provide a Professional level subscription that would allow users to download fonts for workflow support. Professional plan subscribers receive 50 desktop downloads every 30 days. Desktop downloads include a one workstation license. To be downloaded, an eligible font must be included in a project. Fonts can be used to support the workflow as long as the user maintains their Professional subscription.

iPhone, iPad and iPod Touch support
Our customers love gadgets. We do too. Our homes have been infiltrated by iPhones®, iPods® and iPads®. Our beta users insisted that we support Mobile Safari. Easier said than done. You may have heard or read that these devices have a unique approach to Web font support. Common font formats are not supported, so some significant cycles went into getting this one right. We learned that some folks out there had tried to support Web fonts on these devices with mixed results. We took great care to study this situation so that we would avoid the problems others were experiencing. The result is robust iPhone, iPad and iPod Touch support. No crashing browsers here, just beautifully rendered Web fonts in the palm of your hand.

Non-JavaScript publishing
Another consistent request was for support of a non-JavaScript publishing method. JavaScript is a great standards based way to deploy functionality to a website. JavaScript is supported by all major browsers, but there are circumstances under which it’s just not the right approach. If this is your situation, you will be glad to learn that we provide our Standard and Professional tier subscribers with the option of JavaScript or Non-JavaScript publishing methods. Even if JavaScript is fine for you today, it’s nice to know you have the choice to use either.

Private font support
This was another tricky one. There are many companies out there who have custom typefaces that support their brand identity. Naturally, they need to be able to deploy these fonts in their Web font projects, without releasing them into the general population. Our solution… you provide the fonts with proof of a proper license, we upload them into your account so that only you can use them. It’s kind of like bringing your own wine to a restaurant. You bring, we pour. BYOF.

Improve the portal user interface and usability
We hear ya. We received some very candid feedback on the portal user interface and usability. We also did some usability lab testing on this one. While we were able to take care of several of the more glaring issues, there are remaining things that need to be done. We’ve got a big list of improvements lined up.

Pricing was probably the most commonly expressed concern. It seemed like everyone was anxious about it (including us). Generally, the feedback seemed to be, “we get it that this is a premium offering, but please make sure it’s affordable.” There was also a very specific concern expressed about making sure beta users had plenty of time to upgrade to a commercial plan before the colophon badge would display on their sites. In addition to the feedback we received from beta users, we conducted focus group testing during which we asked users for their thoughts about pricing. We found that users expected that it would cost something (Phew!), and that a usage-based subscription fee model made sense. What also seemed consistent was that users did not want to be saddled with a long term commitment, wanted the ability to try it out first, didn’t want any tricky limitations, and as mentioned above, did not want to have to pay for the fonts twice (once for Web font use and again for desktop use). To address these needs, we took several actions. We decided to offer a feature rich Free plan that would include all of the same 2,200+ fonts that were available during beta and a generous allowance of 25,000 page views per month. To address the colophon badge requirement concern, we decided to waive it until 2011, giving our beta users over 3 months to decide if they wish to upgrade or stay with the free plan. We also decided that all tiers should be free of arbitrary limitations on domains per account and fonts per site. As a result every account type (even free accounts) can have unlimited domains per account and unlimited fonts per site. To make this even easier to take advantage of, we also decided to provide SSL and subdomain wildcard support for every account type. So that users don’t end up paying for capacity they don’t need, we offer 10 different page view allowance plans, and monthly rather than annual commitments. If your traffic goes up next month, you can upgrade to a higher plan, if it goes down you can downgrade to a lower plan. No long-term commitments. The price points we arrived at were informed by the focus group feedback we received. Some users suggested higher prices, and some suggested lower. We arrived somewhere in the middle with an offering that provides access to over 7,500 premium Web fonts for as little as $10 per month. For those who want access to premium Web fonts but don’t want to pay anything at all, we have a free plan that offers 2,200 web fonts for free…zip… As a reminder, the colophon badge requirement for the free account has been waived until 2011…so don’t wait.

There’s so much more in the pipeline that I would love to write about, but it will have to wait for another day. Besides, we should be using this time to beautify the Web!

Great type makes sites stand out