One of Google’s core principles is that "fast is better than slow", and the Web Fonts team takes that to heart. We’re always looking for ways to make web fonts load faster, and that’s doubtless a key factor in our rapid user adoption. Today, we are announcing a new way to make web fonts smaller and faster, in collaboration with the Monotype Imaging Fonts.com Web Fonts team. Google Web Fonts now implements Monotype Imaging’s MicroType Express compression format, which yields an approximate 15% savings in file size over using gzip alone. This change will automatically speed up Google Web Fonts for Internet Explorer browsers (version 6 and up). We’re also actively working to offer improved compression with other modern browsers, including Google Chrome.

We’ve kept the interface simple, so designers don’t need to update their integrations in any way — we’ll automatically upgrade the CSS snippet and font files so that site designers and visitors get their fonts faster. We’ve done this for previous speed optimizations as well, such as automatically stripping the hints (metadata used for improving rendering quality on Windows) when serving fonts to Mac, iOS, and Android clients. We expect that most future optimizations will also be automatic and transparent.

Monotype Imaging has agreed to make MicroType Express available to the public at no cost; the license can be found at monotypeimaging.com/aboutus/mtx-license. We believe it’s friendly to both open source and proprietary implementations.

Today, we are also releasing an implementation of MicroType Express compression as part of the Embedded OpenType converter in the open-source sfntly library, adding to the existing WOFF compression. The sfntly library, developed by the Google Internationalization Engineering team, serves as the core conversion engine in Google Web Fonts for subsetting, hint stripping, and related functions of our dynamic serving path. We hope that all web font services, as well as people hosting their own web fonts, will use sfntly to optimize font serving across the web.

We are proud to be working with Monotype Imaging, and we look forward to learning more from designers, users, sites and other partners to advance the state of web fonts together!

Posted by Raph Levien, Engineer, Google Web Fonts

Ania Kruk is a type designer from Poznan, Poland. She currently lives and works in Barcelona and Google Web Fonts is proud to include her first published typeface, Cookie.

Q: What is your background as a designer, and how did you become interested in type design?

Actually, I'm still a beginner in the world of type design: I have drawn letters for only 2 years. I've recently graduated from the University of Arts in Poznan, Poland. Originally, I studied product design, but after 3 years I found myself more interested in graphics than in furniture.

So I took a one year break and moved to Barcelona, Spain, where I worked as an intern in Estudio Mariscal (which was quite an experience, as they were working on the 'Chico y Rita' movie at that time), and did a one-year Masters in Typography and Editorial Design at Eina, Escola de Disseny i Art.

When I came back to Poland for my last year of studies, I was 100% sure that I wanted to focus on type design.
And here I am now, 3 months after my graduation, with my first typeface to be published: Cookie :)

Q: What is your favourite part of the type design process, and why?

Generally, I'm interested in complex, narrative projects that require creating a whole from various elements (meaning: editorial design, information design, typography). Type Design is not about designing one letter, it's about creating a system: the alphabet.

I like the moment when you can start writing words and sentences with your letters, because then you can actually work on the flow and on the balance between the characters. For example, to make some of them more 'normal', transparent, in order to make others more distinctive or decorative.

Q: Designing a new typeface is a long journey. What inspires you to keep motivated throughout all the different stages?

For sure, Type Design is all about details, that an average user won't even notice, so you need to be patient to do this kind of work. I'd say I'm quite competitive, so when I see other peoples projects and I think 'Wow, that's so cool!', it get's me motivated ;) I spend an awful amount of time digging through the internet, checking out blogs, personal websites, etc.



Q: Can you recommend how other type designers can learn the skills involved in making type?

It's hard to say, because I'm still learning myself. But I'd say that calligraphy and drawing are essential to understanding the construction of the letters.

Q: What do you think could be improved about the type design process?

For me the hard part is hinting ;)

Q: What inspired you to create Cookie?

Cookie is a script typeface, based on brush calligraphy. It has a little bit of the 1950s look, that makes you think about all the beautiful ads and pin-ups from this time. It's sweet and friendly - but not too decorative. I tried to keep it simple and legible.

Q: Did you try to accomplish something specific with this typeface design, and did you succeed?

It's my first script typeface, so the whole design process was like discovering a new way of working. I wanted to create a typeface with a nice flow between the letters, and I wanted the letters to join in a natural way - that's the tough part, if you think about all the possible combinations between 26 lowercase characters. I hope it works ok...!

Q: What kinds of uses are most appropriate for this font?

Its clearly a display typeface, suitable more for titles than main texts. But it can be used for short texts, if you're aiming for a hand-written look. It will look good on an invitation, menu, recipe... poster, flyer or as a header of your blog :)

Q: What are your favourite fonts, and why?

Well, I don't really have any favourites. It all depends on the context and what you want to communicate: a typeface can be perfect for one kind of a job, but look horrible when misused.

There are some surprises: I've always considered Mistral by Roger Excoffon as very kitsch and ugly, until I've seen it in on the opening credits for the movie 'Drive'. It looked just great, combined with the music and pictures.

Posted by Dave Crossland, Font Consultant, Google Web Fonts

We’ve received lots of requests from developers for a dynamic feed of the most recent web fonts offered via Google Web Fonts. Such a feed would ensure that you can incorporate Google Web Fonts into applications and menus dynamically, without the need to hardcode any URLs. The benefits of this approach are clear. As Google Web Fonts continues to add fonts, these fonts can become immediately available within your applications and sites.

To address this need, we’ve built the Google Web Fonts Developer API, which provides a list of fonts offered via Google Web Fonts. Results can be sorted by alpha, date added, popularity, number of styles available, and trending (which is a measure of fonts growing rapidly in usage). Check out the documentation to get started.

Some developers have helped us test this new API over the last few months, and the results are already public. Take a look at TypeDNA’s photoshop plugin as well as Faviconist, an app that makes generating favicons as simple as can be, and Google Web Fonts Families, a list of Google Web Fonts that have more than one style.

We look forward to seeing what you come up with!

Posted by Jeremie Lenfant-Engelmann, Engineer, Google Web Fonts

At the end of June, we announced an experimental interface for the Google Web Fonts interface. Today, we’re pleased to offer this new interface to all users, by default. From now on, you can simply visit www.google.com/webfonts to use the new layout and functionality. The old interface will no longer be accessible.

There are a few things we’ve added since we initially launched the interface. We’d like to call attention to one of those features in particular. We’ve added the ability to bookmark your collection. Simply click the “Bookmark your collection” link from the top right of any page. This will give you a link that you can share with friends or coworkers to quickly share your selection.

There’s more to this than meets the eye. The bookmark will depend on which page you are currently on. For example, if you grab the bookmark link from the Review step, your link will forward to a page that displays your selection in the Review step. Similarly, if you grab the link from the Use step, the link will forward to the Use step. In this way, you can selectively choose which step in the font selection process you’d like to link to.



We hope you enjoy this new interface. We’re grateful for all the feedback we’ve received over the past 2 weeks, and we aim to continually improve the Google Web Font selection experience based on everything we hear. Keep it coming!

Posted by Marc Tobias Kunisch, Webmaster, Google Web Fonts

As we talked about at our Google IO session, the Google Web Fonts team has been hard at work designing a new font browsing experience for www.google.com/webfonts. Today, this new interface is available for you to try! Just click here, or you can click the New Version link at the top of our current product. The interface has a lot of the features you've requested, including the ability to preview your own custom text, the ability to compare fonts side-by-side, as well as an indication of page load times.

To arrive at the final design, our team spent significant time researching how users pick which fonts to use on your web pages, blogs and projects. Based on our findings, we sketched out dozens of possible ways to design our font browsing experience. After many iterations of testing with our test users, we believe we've arrived at a font browsing experience you'll really like.

Our primary goal with this new interface is to ensure that as the library of free, open source web fonts grows, you can still browse the library quickly and easily. To accomplish this goal, we've introduced the concept of a collection, which is similar to the concept of a shopping cart on your favorite ecommerce website. Just add fonts to your collection, and then proceed through the Choose, Review and Use steps. During this process, you can compare them side by side, experience with them in sample layouts using the new Test Drive feature, and finally copy and paste the HTML snippet to use these fonts in your pages.

During our user studies, we noticed that when users proceeded to select a font, they have a certain use case in mind. In other words, they knew they were looking for a font for a logo, for a heading or for body text. So we designed 3 different viewing modes - Word, Sentence and Paragraph - to facilitate font browsing in each of these cases. By default, you are in Sentence mode, which shows about a sentence length of preview text. But when you switch to Word mode, the font preview size increases, and the font cards shrink so you can see more fonts on the screen. When you switch to Paragraph mode, the text size will shrink significantly, and you'll see the fonts used in sample paragraphs instead.

Second, the new interface allows for easy font browsing by weight. Just use the thickness filter in the left hand panel. Looking for an Ultra black font? How about Ultra Light? Look no further. This feature relies on the font technology of TypeDNA. The Google Web Fonts are analyzed to determine each font's specific boldness characteristic. In this way, you see a consistent level of boldness across the fonts in your filter, regardless of how the font designer originally categorized them.

The new interface introduces the Test Drive module, which allows users to visualize their font collection in a sample layout. In this way, you can see what your fonts look like in practice, before embedding them in the final product. To take your fonts for a test drive, click on the Test Drive tab from within the Review step.

And finally, the new interface has a final step, Use. Here you'll find an indication of page load time based on your font selections. It's important to remember that the more fonts you use on your page, the more font data needs to be downloaded before your users can use your pages. Although Google Web Fonts is highly optimized to serve web fonts quickly to any user in the world, it's always important to request only the font families and styles you intend to use on your pages.

Sometime in the next few weeks, this interface will replace the current homepage at www.google.com/webfonts. But until then you can give it a spin and let us know what you think.

Posted by Jeremie Lenfant-Engelmann, Engineer, Google Web Fonts

Oftentimes, when you want to use a web font on your website or application, you know in advance which letters you’ll need. This often occurs when you’re using a web font in a logo or heading.

That’s why we’re introducing a new beta feature to the Google Web Fonts API. The feature is called “text=”, and allows you to specify which characters you’ll need. To use it, simply add “text=” to your Google Web Fonts API requests. Here’s an example:

<link
  href='http://fonts.googleapis.com/css?family=Special+Elite&text=MyText'
  rel='stylesheet' type='text/css'>

Google will optimize the web font served based on the contents of this parameter. For example, if you only require a few letters for a logo, such as “MyText”, Google will return a font file that is optimized to those letters. Typically, that means Google will return a font file that contains only the letters you requested. Other times, Google might return a more complete font file, especially when that will lead to better caching performance.

The “text=” parameter has the potential to dramatically cut down web font file size. In some preliminary studies, web fonts can be cut from 35k down to just 5k (or even smaller), if only short strings of text are required. If you have a longer string, you can shorten the request by removing duplicate characters, as the order of characters in the string doesn’t matter.

The effect of this feature is even more pronounced on mobile devices, where connection speeds are limited. Using the text= parameter, you can ensure your users will have a great, quick loading experience.

We’re happy to say that the feature also works for international fonts. There’s no need to also specify the subset= parameter, as text= has access to all the characters in the original font. To access Unicode characters, use standard technique of url-encoding the UTF-8 representation of the string. Therefore, ¡Hola! is represented as: text=%c2%a1Hola! .

Enjoy!

Posted by Raph Levien, Engineer, Google Web Fonts