Google Web Fonts

Google Web Fonts is integrated into Network Solutions’ Website Builder Tool

2012-02-07T09:24:00.000-08:00

The Google Web Fonts team is proud to announce that Network Solutions have integrated our service with their Website Builder Tool.

Network Solutions is one of the largest domain registrars. When you register a domain with them, you can quickly and easily create a website using the Website Builder Tool. In the Page Editor, you can simply select a font from a drop down list in the typography palette for any text area:

Get a domain from Network Solutions, create your site and you’re good to go with web typography!

Read more at the Network Solutions blog.

Are you a web developer, looking to present our growing collection to your users? If so, you should definitely check out the Google Web Fonts Developer API, which allows convenient programmatic access to a list of all fonts in the directory.

Posted by Dave Crossland, Font Consultant, Google Web Fonts

Web Fonts, now more compressed

2012-01-09T11:55:00.000-08:00

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

Extensis plug-in now supports Google Web Fonts

2011-11-08T00:00:00.000-08:00

Do you use Photoshop® to design your website? Looking to spice it up with cool web fonts like Lobster or Dancing Script? Well, now you can do that and more (with over 280 font families) using Google Web Fonts right in Photoshop®.

That’s because, today, Extensis has added support for Google Web Fonts to their Web Font Plug-in for Photoshop®. Now, the entire catalog of Google Web Fonts is only a click or two away!

In addition to making the entire catalog of Google Web Fonts easily accessible, the plug-in takes advantage of the full power of Suitcase Fusion 3. This means that any web fonts you choose to use for your designs are automatically kept up to date, and fully activated as needed. For example, this makes it easy for you to send your Photoshop® files around to your coworkers and not worry whether they have the font(s) installed — it will "just work"!

The free Extensis Web Font Plug-in for Photoshop® can be downloaded now, from: webfontplugin.com

Posted by David Kuettel, Technical Lead, Google Web Fonts

Interview with Polish Type Designer Ania Kruk

2011-11-02T15:21:00.000-07:00

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

Kickstart new fonts!

2011-10-25T10:32:00.000-07:00

Google Web Fonts is proud to announce a new funding experiment, using Kickstarter - a popular way to fund creative projects.

Each month there are many typeface designs proposed to our team for publication and financial support. But we can’t support everything! Even with the best quality proposals, it can be hard to decide about those that are quite similar to ones already published. Really the best judge of which web fonts you want to use is you!

So we invited the designers of three recent proposals to try out Kickstarter and see how it works for font projects. There are some fun rewards for pledging a contribution so click through to see the details!

Folk

First is Marcello Magalhaes’ Folk, which transforms the vernacular lettering of Sao Paulo into a font. Already popular as web font, it has been used by The Independent Film Channel and Mozilla - but it only includes an uppercase set of glyphs, and not all the symbols and accents that Google Web Fonts requires. For this project, Marcello will complete the font to the Basic Latin character set, and has designed a poster to go with the new release.

Fast Brush Script

Fast Brush Script is the working name for a font by Pablo Impallari. Pablo's first font, Lobster, is one of the most popular Google Web Fonts, having been served over 2 billion times.

Pablo is offering a very unusual reward - choosing the name! Normally the name of a font is sacred to the designer, but Pablo is opening up the opportunity for corporate patronage of his work. The development name 'Fast Brush Script' reflects the core concept of the typeface. This font is currently in an early development stage with the lowercase letters now fully prototyped, as you can see above, and you can download the current develop version from the Kickstarter project page.

Montserrat

Montserrat is an extremely high quality sans serif text typeface by Julieta Ulanovsky. Advancing substantially during her studies at the prestigious University of Buenos Aires' Masters degree in Typeface Design, the design revives the historical type of the Montserrat neighbourhood where Julieta lives and works.

This genre of type has been a popular trend in recent years and this typeface in particular stands out with its excellent quality. Setting it apart are the set of alternative caps, which add a little fun to a very functional text typeface.

The Google Web Fonts team has already contributed directly to these Kickstarter projects, and we hope you will also become a backer for all three projects as well - let's hope the type designers will be paid far beyond their minimum funding goals!

Update: When fonts are made available in Google Web Fonts, all their source files are also available from the 'Google Font Directory' Google Code Project in a Mercurial version control system, under a free, libre and open source license - typically the SIL Open Font License.

Posted by Dave Crossland, Font Consultant, Google Web Fonts

Scary Fonts For Halloween

2011-10-24T14:36:00.000-07:00

Halloween is here - what a fun time of year! The pumpkins are carved and the seeds are roasting in the oven, a chill is in the air, and all the little monsters are busy planning their best tricks and hoping for excellent treats. With all the trick or treating & costume planning, why not add some Halloween spirit to your website as well? We're happy to publish 4 new, fun, and scary fonts this week that are sure to provide a spoooooky feel for your website!

We would love to see how creative you can get with these fonts - please let us know where you are using them in the comments of this post, and we'll send out a Google Web Fonts T-shirt for our favorite!

Creepster by Sideshow

Its ghastly! Its gory! Its gruesomely gleeful! It's Creepster Caps, the blood-curdling new font from Squid and Sideshow. This fright-filled font has so many alternates its like stitching together your own monster every time you use it. Creepster Caps: perfect for all of your grisly graphic needs!

Eater Caps by Typomondo

Eater Caps is a display font infected by the darkest of rare disease that slowly spreads at night while the webfont user sleeps.

Nosifer Caps by Typomondo

Nobody knows where Nosifer Caps comes from. It emanates a dark stench as it drips from the internet.

Butcherman Caps by Typomondo

Butcherman Caps is a zombified display font, hacked and chopped and left for dead, yet still crawling!

Posted by Posted by Dave Crossland, Font Consultant, Google Web Fonts

Integrate Google Web Fonts selection into your apps

2011-09-27T10:00:00.000-07:00

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

The new Google Web Fonts - Now fully launched

2011-07-12T12:00:00.001-07:00

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

The New Face of Google Web Fonts

2011-06-28T15:25:00.000-07:00

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

Interview with Argentinian Type Designer Pablo Impallari

2011-06-13T06:21:00.000-07:00

Pablo Impallari's Lobster font is one of the most popular fonts on the web. Its exciting design, excellent OpenType features, constant development and inclusion in the launch of Google Web Fonts last year have made it a favourite for millions of people.

Pablo continues to actively design and release his own typefaces and help other designers learn and publish new fonts. You can see all his fonts and read more about Pablo on his Google Profile.

Q: What inspired you to create the Dancing Script font?

I love scripts, both formal and casual. For Dancing Script, my inspiration came from the many casual scripts of the 1950s. "Murray Hill" and "Mistral" were the two main references.

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

I wanted to create an informal flowing script where the letters bounce up and down the baseline. And to keep it friendly and legible at the same time.

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

Any place where Arial and Times New Roman look boring. Informal invitations, party flyers, Happy Birthday cards... you name it! Its better to use it together with sans-serif fonts, so the spontaneous effect is enhanced through visual contrast.

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

If you look at the whole picture, thinking that you have to complete more than 200 glyphs, that can be overwhelming. But if you goes one letter at the time you get little "Eureka moments" each time you get finish a glyph. That motivates me to move on to the next one. Also, being able to write more words every time a new letter is added feels fantastic.

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

Designing the lowercase letters. Don't really know why... maybe because this is where everything else is defined.

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

Doyald Young's books are mind blowing. I encourage everyone to buy them. Sadly Doyald passed away recently and he surely will be missed!

Q: What are your favourite fonts, and why?

So many...

Young Galland and Young Finesse from Doyald Young, they are just perfect!

Montague Script from Stephen Rapp, its a truly lively script.

Pooper Black and Sneacy from Michael Clark, for the same reason.

Cabazon from Jim Parkinson, a legible, friendly Blackletter.

Tyffany and Ronaldson, for they spikey caps.

I can continue forever... There is always something to love in almost every typeface.

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

Hinting TrueType fonts is very hard to do. On Type 1 or OpenType-CFF fonts, that was not really a big problem since their hinting is much easier and looks much better. But since TrueType fonts are coming back for the web, TrueType hinting is important once again. This is my new reason to hate IE. Having a nice TrueType autohinter would be great!

Posted by Dawn Shaikh, Senior User Experience Researcher, Google Web Fonts

Streamline your web font requests. Introducing “text=”

2011-04-26T11:45:00.000-07:00

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

Using UX Research to make Google Web Fonts even better!

2011-03-14T16:16:00.001-07:00

Late in 2010, our team spent hours learning more about our users through surveys and traditional usability methods. In our survey, users spoke up loud and clear - “We want more fonts!” We are working hard to add new fonts with 35 font families added since December. What did users like best about the Google Font Directory? It is easy to use, available, dependable, and it has decent font choices and features... all at a great price - free!

What new features would you like to see added to the Google Font Directory?
More fonts! (More in general, international fonts, basic fonts, more weights/variants, & specific fonts)

What, if anything, do you like best about the Google Font Directory?

During our usability sessions, we were able to see many types of users interact with our web fonts. We identified major user groups and documented their typical workflow. The research we conducted took us to the brainstorming table. Our whole team spent an entire day brainstorming goals and priorities based on user research. The brainstorming day was followed by a design sprint in our Seattle office. Four talented Google designers and other team members spent five full days working through hundreds of mocks and design concepts. Stay tuned for the results of this effort!

So what’s next? More user testing, of course! Our engineers and user experience team have been busy working on ideas from the design sprint, and we are ready to get some feedback. If you would like to help us, sign up here!

Brainstorming involved lots of discussions & lots of stickies!

Hard at work in the design sprint.

Sign up to help us make Google Web Fonts even better!
http://goo.gl/1hmDN

posted by Dawn Shaikh, Senior User Experience Researcher, Google Web Fonts

Introducing Expletus Sans

2011-03-02T14:46:00.000-08:00

Expletus Sans was added to Google Web Fonts this week.

Jasper de Waard, born in 1996, first came in contact with the beauty of type design when he was 10, and developed his skills as a type and graphic designer ever since. He was born and raised in Rotterdam, the Netherlands, and went to a bilingual high school there, training him to read and write English fluently and have a more international focus. He is currently in his third year, three years before his exam. He hopes to continue his practices in the fields of type and graphic design after he finishes school and release many more typefaces in the future.

His love for the tiny details, balance in proportions and urge for perfection made him into what he is today. However, the great support and feedback from people on several forums can't be denied as a great source of inspiration and evaluation material, giving him a greater understanding of the method behind type design. He is also available for custom type work and identity design.

Q: What inspired you to create the font?

It was a single x in a logo that started me off, but it was largely a search for my own opinions in type design so in a way you could say Expletus Sans was 'self-inspired'.

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

I wanted to create a look that was completely different from everything I knew. I feel like I definitely succeeded in this.

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

It could be used for anything that needs a good dose of elegance. I would personally love to see it in identity work.

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

Ones I put my mind to something, I finish it. With designing a typeface I feel like I have no choice. Once I've started, I get obsessed with perfection. Apart from that, it was the many great responses I got on the internet on my work that kept me motivated.

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

The very beginning. Trying to work out the basic lines of a concept and see the skeleton of the typeface emerge. It pleases me most, because it's the fastest and most rewarding process. After that it's months of tiny little details.

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

Start drawing or straight on the computer and post your work on as many type-related websites as you can think of. Take your time to read through feedback and never dismiss an idea before you have seen it. Don't give yourself a deadline. You'll never make it in time.

Q: What are your favourite fonts, and why?

All fonts by Robert Slimbach, because of his brilliant eye for perfection. Dolly, because of it's comfortable, yet fresh feel. The Centro superfamily, for excellence throughout all styles. Many more, for even more different reasons.

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

Multiple Master should be used more extensively and automated processes like iKern are underrated.

Q: How do you feel about publishing your font as an open source project?

It just happened to me. I never particularly thought about it, until you knocked at my door. It seems like a good way to start and increases the chance of seeing my work in use. I feel like it gives me the chance to make the world just a little bit more beautiful and let others enjoy that too, without charge.

Posted by Dave Crossland

Google Web Fonts - New Stats, New Name

2011-02-17T23:29:00.000-08:00

Web fonts are taking off in a big way. Back in November, the Google Web Fonts team first published stats on the rapid adoption curve of the Google Font API. Then, Google was serving approximately 17 million daily font requests[1] to roughly 400,000 unique websites[2].

And today, less than 4 months later, we’re excited to announce that Google Web Fonts has since grown by another 290%. The Google Font API now serves roughly 50 million daily requests[1], across roughly 800,000 unique websites[2]. This equates to over 30% month over month growth. Amazingly, these stats don’t factor in caching, so the actual views of Google Web Fonts may far exceed these numbers.

Growth picked up considerably after Google Web Fonts announced over 20 new font families for the New Year. From these numbers, it’s clear that web fonts are quickly becoming part of the standard practice of web developers, game developers, and bloggers.

To make it easier for all, we’re also pleased to announce a re-branding of the “Google Font Directory” to “Google Web Fonts.” The service is now available via the simple, memorable URL: www.google.com/webfonts.

Web fonts are on their way to changing the very fabric of the web, and this is very exciting to Google.

Here’s to a beautiful web!

Posted by David Wurtz, Product Manager, Google Web Fonts

[1] A request is a single call to the Google Font API for one or more fonts.
[2] We count a unique website as unique domains, except that “www” subdomains are not counted. For example, www.myblog.com and myblog.com would count as one domain. However, sam.myblog.com and sally.myblog.com would count as two domains.

Interview with Astigmatic

2011-01-27T08:06:00.000-08:00

We recently got a hold of Brian Bonislawsky, founder of the Astigmatic One Eye Typographic Institute, to describe his design process and motivations.

Q: When did you design your first font? What font was it?
My very first font was called ChickenScratch. I designed it in the summer of 1996 as the first freeware font for my website to test the waters to see if I was able to make a usable font for the public. I still see it out there a lot today, and seeing all the different design intentions for it has only helped inspire me in my design process since then.

Q: How do you go about creating a new font? Where do the concepts come from?
Making a new font starts with the idea, and luckily...font inspiration is everywhere. It can come from seeing advertisements and signs, to vintage advertising, to movies and music, to the surprise of seeing how fonts are used in projects outside of how you ever intended them to be used.

I'm still a bit old school when it comes to making new fonts, by starting out with sketches on paper. I like to work on creating consistency across all of my characters while also imaging possible variation to the lettering before taking it into a digital form. This stage of creation is the most appealing to me, before it gets into the technical side of point placements, spacing, kerning, and other features. It is the artistic period of the font.

Q: What is your favorite font you've designed?
That's difficult to answer, only because I have so many fonts I've designed, and at one time or another, they've each been my favorite font. I am usually driven to create what appeals to me, and by that, I find the latest fonts of mine to be my favorites. I really love offbeat and comic styles of fonts though, because they remind me of watching Saturday morning cartoons when I was a kid. With that said, right now, my favorite font of mine is Luckiest Guy.

Q: What is your favorite font from another designer? Why?
Besides offbeat comic fonts, I've always been drawn to historical lettering and typestyles, and while it isn't a single font from another designer, my favorite fonts from another designer are the Bluemlien Collection from Sudtipos. They encompass such a variety of handwritten styles, in a variety of refinements. I could just look at specimens of these for hours at a time.

Q: What is your favorite part of the type design process, and why?
All my early schooling was driven predominantly by fine arts training, so I definitely find the sketch development process is my favorite part of the type design process. I've done a lot of freelance for other designers on the technical side of font development, and while there is a degree of enjoyment I get out of it, it definitely feels more mechanical in nature. The sketch and idea phase of a typeface is the chance to free or restrain yourself depending on the type of font you are creating, and reminds me the most of how I used to express myself through other mixed medias. It's the time most open to experimentation.

Q: What do you think could be improved about the type design process?
Perhaps the main thing that could be improved is schooling. When I started, there weren't any schools for this, it was all picked up as I went along, and not many people wanted to share how they did things. I got lucky enough to get paired up with Bitstream and some other designers through TypeCon, a yearly type conference, and through those connections I expanded my skill set.

There are plenty of schools and courses for Graphic Design out there, but I haven't seen a lot of courses for type design itself. I've seen a number of designers with creative ideas come and go because they've been intimidated by the type design process, and that's a shame. It can seem like an overwhelming task when you start making fonts, but once you learn the ropes, it can become second nature like anything else. I'd like to encourage more font designers to come forth, as I think, like any other art field, the infusion of new blood and fresh ideas not only helps type design evolve as an art form, but it also spawns developers to create even more fluid production tools to enable us in new and better ways.

New Fonts for the New Year

2010-12-28T12:33:00.000-08:00

The Google Font team is excited to announce the addition of a handful of high-quality web fonts for you to use freely on your website or blog. With this addition, the Google Font Directory has almost doubled in font selection compared to last month! We'd like to thank the font designers responsible for such a great collection of premium (and free) web fonts.

To use any of these new web fonts, simply click the "Use this font" tab on any of the font pages and paste the snippet into your pages. Google will take care of the rest. Without further delay, here is the all star lineup:

Ubuntu

Mountains of Christmas

Introducing the Ubuntu Font Family to the web

2010-12-20T06:48:00.001-08:00

Google and the Ubuntu project have today released the Ubuntu Font Family to the world through the Google Font Directory. The new Ubuntu Font Family debuted in the current Ubuntu 10.10 release of the Ubuntu operating system and is also available for download from font.ubuntu.com.

The main www.ubuntu.com site features the Ubuntu Font Family in-use from today (screenshot below). Through the magic of the Google Font API any web designer can now pick Ubuntu from the Google Font Directory and bring the beauty and legibility of the Ubuntu fonts to their websites too.

The Ubuntu Website using the Ubuntu Font Family

The Ubuntu typeface family is a set of new fonts in development throughout 2010–2011. The development is being funded by Canonical Ltd on behalf the wider Free Software community and the Ubuntu project, with the skilled font work being undertaken by Dalton Maag. Like everything else in Ubuntu, the fonts are free to use and legal to share, sell, bundle and build upon. The included “source code” allows remixing, improvement and expansion by anyone with the skills or an interest. This release includes Latin, Cyrillic and Greek support, and future versions will be automatically rolled out to everyone using the Google Font API.

Mark Shuttleworth, founder of the Ubuntu project, commented: "Our focus on design and usability in Ubuntu led us to create a font which is at once beautiful and readable. We're delighted to share the Ubuntu Font Family with web designers around the world who want their websites to be stylish and readable in as many languages and browsers as possible. The publication of the Ubuntu font on the global Google Font Directory is an appropriate treat for the festive season, and we wish all those who contribute to, and enjoy the benefits of, free software and open content a very happy and healthy solstice and New Year."

Bruno Maag of the Dalton Maag type foundry, who have been working with Canonical on the design and technical implementation of the typeface commented, “It is unique in our company’s history to work on such a comprehensive high-quality font and to have it given to the World to use for free. The creativity and expertise that is available in the open source world, in particular the insight into language and script requirements, ensures that the fonts are a useful tool for everyone. The right font used correctly can increase accessibility to information and increase productivity. With today’s gift, we expect to see widespread adoption of the Ubuntu fonts from today, as it combines design at its best with simple distribution through the Google Font API.”

Google is excited to be providing such a high quality font to the world, with all of the benefits of web fonts including amazing searchability and accessibility. Web fonts demonstrate the true power of the web, as web pages can be translated and still preserve a rich visual presentation - something not possible with any other technology, especially baking text into images. The Canonical Design blog has a history of the fonts’ development and as the language coverage increases throughout 2011, users will automatically get those improvements along with the performance and reliability they can expect from Google. I hope that people have fun over the holidays adding the Ubuntu web fonts to their sites!

Posted by Raph Levien, Google Fonts

Web fonts go mobile

2010-12-01T12:14:00.000-08:00

Google Fonts now work for the vast majority of mobile devices, including Android 2.2+ devices, iPhone and iPad! And now with the recent release of iOS4.2, even non-latin scripts like Greek will render beautifully on the iPad and iPhone.

One of the biggest benefits of using the Google Font API is that the service removes the nuances involved with rendering web fonts correctly across all devices and platforms. As a user, you can simply choose which font you'd like, and Google will take care of the rest.

Want a peek behind the curtain? ... When a request for a web font comes into our servers, we detect the browser and device, and serve the font file format that works best on that device. For example, for older versions of iOS, which don't support the TrueType font format, we convert the font vectors into SVG format. Obviously, this is not something you'd want to do manually, for each device your users are on.

With this new mobile support, we think the value and simplicity of the Google Fonts are better than ever before.

Posted by David Wurtz, Product Manager, Google Fonts

New! Web Font Statistics

2010-11-24T13:25:00.000-08:00

We're excited to announce the launch of two new features of the Google Font Directory.

1) Font level statistics
Curious to see which fonts get the most usage, how that usage is trending, or where in the world that font is used? Now you can visit the Info tab found on each one of the font pages to see these stats. See an example of the font Lobster here. The delta between the most and least popular font in the Directory is huge, which goes to show that some of our fonts (such as Lobster) have really found a niche on the web.

2) Sort by popularity
From the front page of the Google Font Directory, we've added a pull down that allows you to change sort order of the fonts. Now you can choose by font popularity! This sort order is based on the last 7 days of font requests.

Posted by David Wurtz, Product Manager, Google Font API

Web fonts on the rise

2010-11-02T13:36:00.000-07:00

We launched the Google Font Directory and Google Font API to help establish a core set of web fonts that can be used openly across devices and platforms. Recently, the team took some time to reflect on our progress, the adoption of web fonts in general, and on the current limitations. We'd like to share some of the most interesting stats from our analysis:

The Google Font API currently serves over 17 million requests [1] a day to users across the globe.
We’ve seen a 30% month-over-month growth rate since we launched. (This corresponds to over 20x year-over-year growth.)
Roughly 400,000 unique websites [2] use the Google Font API.

The adoption of the Google Font API has been fantastic, and we think it speaks to the potential of web fonts to change the web. Google isn’t the only player in this space to see promising adoption stats. In order to fully assess the state of the web font ecosystem, we worked together with our friends at Typekit. They performed a similar analysis and their results are equally exciting.

Although there is a long way to go for comprehensive browser and device support (especially for complex scripts like Arabic), we are highly optimistic. With web font adoption quickly gaining momentum, there will be increased pressure on the browsers and platforms of the world to support web fonts in a standard and consistent manner. But we need your help! If you have interesting example uses of web fonts, feature requests for the Google Font API, or encounter problems, please let us know by posting on our feedback page. Here’s to a bright web font future!

Posted by David Wurtz, Product Manager, Google Font API

Navigate the font directory more easily and submit your fonts

2010-10-28T09:42:00.000-07:00

To make it easier for you to navigate all the tools and documentation that are part of the Font API we have created a unified navigation for the directory.

The directory pages now show a new dropdown menu at the top that takes you to our documentation pages, blog, previewer and other tools very quickly. Don’t forget to check out our new chrome extension as well.

Submit your font or tell us where you have used the Font API

In the new navigation you will also find two new forms we have created for you. If you are a font designer and would like to see your font as part of the directory fill out our font submission form and tell us about it.

Have you created a website and used the Font API in a creative way? We would love to hear about that, too.

We are working hard to improve our service and the directory. If you have any suggestions you can always give us feedback on our moderator page.

By Marc Tobias Kunisch, Webmaster for the Font API Team

Interview with Danh Hong, designer of Hanuman

2010-10-26T07:17:00.000-07:00
As you may know, the Google Font team recently launched a small handful of non-latin fonts in the Google Font Directory, including Cyrillic, Greek and Khmer. We recently got a hold of Khmer font designer, Danh Hong, to describe his Cambodian font Hanuman and what went into and motivated its creation.

Q: What inspired you to create the Hanuman font?
It comes from my inspiration to have high quality Khmer fonts for both computers and mobile devices. My Khmer language is complex, and the typeface is rich. So I thought the new font technology we have today can help people to use the Khmer language on their computers and devices, and can save Khmer culture in digital age. Windows ships with a Khmer font, but it is small and hard to read. However, Mac OS X and the iPhone don’t ship with a Khmer font yet, and these products are getting usage in the Cambodian market.

Q: Did you try to accomplish something specific with this font, and did you succeed?
The challenge with Khmer is that it has many levels (above and below) so Khmer paragraph’s take up more vertical space than the same paragraph in English. My goal was to compress the Khmer letters so they would be compatible or similar to the metrics of English characters. I also wanted to merge OpenType and AAT together, so this behavior works with all Windows, Linux and Mac OS X devices.

Q: What kinds of documents are most appropriate for this font?
Because it is similar size to English text, it is best for scenarios that have a mix of Khmer and English text. I think it is good for books, daily newspapers and dictionaries. And because it is serif, it looks good for formal letters as well.

Q: Designing a new font is a long journey. What inspires you to keep motivated throughout all the different stages?
The creativity makes me feel happy. I always feel good when I can do new things, and my life is meaningful.

Q: What is your favourite part of the type design process, and why?
This is a difficult question! My favorite part is always changing. For old TrueType fonts, creating new typeface is interesting, but for OpenType, the “smart” behavior embedded into fonts is my favorite. I also enjoy hinting, because it can make the text clear to read.

Q: Can you recommend how other type designers can learn the skills involved in making Khmer fonts?
I recommend that potential Khmer type designers to learn Khmer art and old text, in addition to western typography. New things sometime come from mix between the traditional and modern technology.

Q: What are your favourite fonts, and why?
My favorites are handwriting fonts, because they are very natural.

Q: What do you think could be improved about the type design process?
Hinting is always hard work. Right now, there doesn’t exist an auto hinting tool that can do better than hand, but I think it is possible in the future.

International Fonts Launch Today

2010-09-21T19:10:00.000-07:00

Today is a big day for the Google Font API. We have officially added our first non-Latin fonts to the Google Font API and Google Font Directory. Our additions include high quality web fonts for the Cyrillic, Greek, Hebrew, and Khmer scripts. That puts our total offering at 6 scripts, with over 25 unique font families and around 60 fonts in the Directory.

This launch marks a significant milestone for the web. We believe web fonts are critical not just for Latin-based scripts, but for all the world's languages. Fonts are a means of expression, and our choice of fonts freely available on the web should be large enough to allow for many different types of communication. In the coming months, the Google Font API team plans to expand our international coverage across even more scripts.

It's easy to take the variety of Latin web fonts for granted, but we have to remember that some scripts have no web fonts available at all. In these cases, users are required to download “font packs” to display the fonts correctly or they suffer from a poor web surfing experience:

A Khmer snippet properly displayed as a web font:

A Khmer snippet when the reader's computer does not have the correct font installed:

The creation of these web fonts is a labor intensive task that takes incredible patience, attention to detail, and skill. We'd like to thank all the immensely talented type designers that contributed to this launch, including Danh Hong, SIL International, the Greek Font Society, ParaType, and Jovanny Lemonad.

If you use a script that you would like to see supported by the Google Font API, please get in touch with our team through our moderator page. If you are a type designer with experience in designing for a script and you would like to contribute an original font family, we are actively soliciting commission proposals through this Proposal Form.

A more fontastic Google Docs

2010-09-21T08:40:00.000-07:00

(Cross-posted from the Official Google Blog and the Google Docs Blog)

Documents without font choices are like photographs without colors. Just as shades of color can add depth to a picture, smart font choices give your text another dimension.

For a long time, the set of fonts that you’ve seen when you browsed the web has been quite limited. That’s because you could only use a font that’s already been installed on your computer. So if a website designer wanted all her visitors to see the same thing, she could only use fonts that are so ubiquitous that the chances are very high that every computer will have them. And there are only a handful of fonts that fit that bill.

Thankfully, that situation is changing. All modern browsers now support the ability to download web fonts. A web font doesn’t need to be installed on your local computer—it can be read directly from a web server and used immediately on the webpage that you’re loading. In May, we launched the Google Font API, which makes it easy for website developers to include any one of an ever-growing list of web fonts on their pages. We’re already using the new API for the latest themes in Google forms.

As of today, Google documents supports web fonts (using the Google Font API) and we’re excited to announce six new fonts.

Droid Serif and Droid Sans
Android fans will already be familiar with the Droid family of fonts. Droid Serif and Droid Sans both feature strong vertical lines and a neutral, yet friendly appearance. They’re designed specifically for reading on small screens.

Calibri and Cambria
Every day we have many people import documents from Microsoft Word into Google Docs. Today we’re making import fidelity better by adding two of the most popular Microsoft Word fonts. Calibri is a beautiful sans serif font characterized by curves and soft edges. It’s designed to be high impact. Cambria is built with strong vertical serifs and subtle horizontal ones. It’s very legible when printed at small sizes.

Consolas and Corsiva
Consolas joins Courier New as the second monospaced font in Google Docs. It’s a modern monospaced font with character proportions that are similar to normal text. Finally, Corsiva is our first italic font with embellished characters and an elegant style.

Right now our font support covers most Latin and Western European character sets. However, we’ll be adding web fonts for other languages (like Hebrew and Greek) soon. If you don’t see the new fonts in your documents, check that web fonts are supported in your language and that the document language is set correctly from the File -> Language menu.

This is just the beginning of fonts in Google Docs. We added six new fonts today and we’re already testing our next batch. You’ll see many more new fonts over the next few months. And because Google Docs uses web fonts, you’ll never need to install a new font: when you load your document, the latest set of fonts will always be there, ready to use.

Finally, adding web fonts is just one of the challenges that we have been working on. If you’re interested in learning more about the challenges of building a collaborative application, check out the first post of a three-part series on collaboration posted earlier today.

Posted by: Jeremie Lenfant-Engelmann, Software Engineer

Optimizing the use of the Google Font API

2010-09-07T10:08:00.000-07:00
At Google, we're absolutely obsessed with making the web faster, and delivering the lowest possible latency to users. Naturally, with the Google Font API, we're concerned with how to minimize the performance impact of web fonts. This post presents a number of best practices for optimizing performance and also summarizes the results of extensive measurements with real-world integrations.

First, the recommendations:

1. Combine multiple fonts into one request.

One pattern we see frequently is a separate <link> tag for each of the font requests. Many users don't seem to know that you can easily combine multiple font requests into a single tag, just separating the fonts with a | character.

So, instead of:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">

write:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid +Sans|Lobster">

This simple trick will save one roundtrip to the server for each additional font requested, and also protect against blocking on older browsers which only have 2 connections open per domain at a time.

2. Don't put the @import in an external CSS

Unfortunately, Internet Explorer has bad performance when one external CSS file links to another using an @import directive. If it weren't for performance issues, it would be good to have the extra flexibility of putting the @import in the same CSS file that uses the fonts, but for best performance, put the <link> tag in the base HTML file.

When that's done, the Font API CSS will usually load in parallel with other external CSS files in the page.

3. Put the font request early

You should try to place the Font API link right after the opening tag. In general, the Font API link should never go after a <script> tag. As Steve Souders has pointed out in his blog post (http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/), if there's a script tag before the @font-face declaration, Internet Explorer won't render anything on the page until the font file is done downloading.

4. Don't ask for fonts you don't use

This may seem obvious, but if you don't actually use a font, don't request it in the API. You might miss this if you do your testing in Firefox or Chrome, which only load the font files needed to render the text on the page. Internet Explorer, by contrast, loads all the fonts requested, even if they’re not actually used.

5. Use tools to analyze your page's performance

An excellent resource is webpagetest.org, which runs your page in an instrumented IE browser, and displays waterfall graphs and other information. It’s also a great idea to use the “Inspect Element” resource graphs in Chrome. Also be sure to follow Steve Souders' blog, which contains tons of useful information about improving performance of web fonts.

Let’s take a closer look at a well-designed site, the home page of the Government of Chile (http://www.gobiernodechile.cl/). This is a (partial) resource timeline from Inspect Element in Chrome over a 3Mbps DSL connection: </script>

The second resource (“css”) is the invocation of the Google font API. As you can see, the request is placed very early in the waterfall, and a number of other requests are served in parallel. Around the time the first round of Javascript is done loading, the page is rendered for the first time (the blue line), and a second round of resources are loaded, also in parallel, including the two “font” resources. This waterfall clearly shows that the font requests aren’t blocking any other resources on the page. If the font request had been an @import in an external CSS, the waterfall would have been different.

Running the same page on webpagetest.org (Internet Explorer 8) shows similar results with respect to the font resources (only first 20 requests shown):

Unlike in Chrome, the Javascript requests of lines 6-9 do serialize (the fact that Chrome is much faster than IE is not just marketing!), but the font API request (line 12) and the font data (line 13) are, just as in Chrome, loaded in parallel. Rendering is, however, blocked until the font data is complete. To make font loading entirely asynchronous and avoid any possibility of blocking the rendering, use the Webfont Loader library. Note that parallel loading will not always be the case, but if you follow the recommendations above, there’s a very good chance of it, and it is always a good idea to use these tools to analyze and optimize the performance of your site.

We’re working with browser vendors (IE9 in particular) to fix the fact that rendering blocks on the font data.

A larger scale analysis of latency impact

To make sure that our recommendations are sound, and that we’re using the best strategy to serve web fonts, we did a detailed quantitative analysis of the impact of web fonts on page load time. We chose 28 popular sites that use the Google Font API, and measured the page load time both with web fonts and with the request to the Font API disabled. Each experiment ran 200 times, with three simulated network speeds: fast (roughly 100Mbps), medium (3Mbps), and slow (384kbps). All the tests were run on Internet Explorer 8, instrumented to report the page load time.

Each of the following graphs shows a distribution of the difference of the mean page load time with and without fonts. As you can see, on fast connections the distribution is consistent with a Gaussian curve centered around zero. In fact, the mean increase in page load time is 37ms (+/- 137ms), so a reasonable conclusion is that there is no measurable impact on page load time. Note that most webpages have a very high variance in page load times, so getting measurements more precise than a few hundred milliseconds is not feasible.

Fast (~100Mbps):

At medium network speeds, there seems to be a bias toward increasing page load times, with all samples save one coming in at between 0 and 500ms. Even so, the mean increase was only 34ms (+/-195ms), so the effect is barely significant.

Medium (3Mbps):

Finally, on slower connections, it is possible to see a definite impact on overall page load times, ranging from 250ms-1.5s for all but two of the samples. At these speeds, the mean increase is definitely significant, at 1016ms (+/- 302ms).

Slow (384kbps):

We wanted to find out exactly what was causing this impact on page load time on slower connections. A reasonable hypothesis is that it’s the bytes themselves. Thus, we made a scatterplot with the total (compressed) size of the fonts on the horizontal axis, and the delta page load time on the vertical. This plot shows a clear linear relationship:

Thus, users on high-bandwidth connections can enjoy web fonts with little or no impact on performance -- the web font request is served in parallel with the other elements on the page. Users on slower connections will see the impact of the additional bytes served. Fortunately, our team is working on ways of compressing font files even further, and users of the Google Font API will see the performance benefits as soon as this work is complete, with no additional effort.

By Raph Levien and Jeremie Lenfant-engelmann, Engineers on the Google Font API Team