Google Web Fonts: 1,000 fonts in 2011

The original YouTube page is at youtu.be/QTX1lU97z08 and a full transcript is available here.


David Wurtz: Let’s get started, shall we? Hi, everybody. My name is David Wurtz. I’m product manager for Google Web Fonts, and I’m very excited to talk about Web Fonts, which was a technology that has the potential to change the Web. Soon I will be joined by my teammate Raph Levien as well as Darren Glenister, who is standing right next to me.

Darren is from a Swedish company, TypeDNA. So a few logistics before we get started.

We have a moderator page and a feedback page set up. Please vote and submit questions so we can make best use of the 15-minute question-and-answer at the end. We have some official hash tags: Google fonts, Chrome and IO. For your convenience, the moderator and feedback link will actually be at the bottom of every one of our slides in the presentation.

Before I get started, I would actually like to take a poll. With a show of hands, I would like to know if you have used Web Fonts before. Wow, great. It looks like about 50% of you have used Web Fonts, which is awesome to see. For those of you who have used Web Fonts, hopefully this presentation gives you a little bit more detail into what Google is doing in this space. For those of you who haven’t used Web Fonts, it will be a pleasure to introduce you to the topic. Here is a quick overview of what we will be talking about in the next 45 minutes. We will start with a Web Fonts crash course. We are going to describe what Web Fonts are, why you should potentially be excited about Web Fonts, and why Google is excited about Web Fonts.

We will then go into Google Web Fonts’ overview, which is Google’s offering in this space.

It is available at google.com/webfonts. It was launched last year one year ago at Google I/O. Next we are going to talk about some interesting trends we have been seeing with Web font adoption. Finally, we are going to talk about what the Web Fonts teams at Google has been up to, specifically three areas: Our efforts to increase the fonts we offer as well as to change how users surf and choose and select their Web Fonts. Second, we are going to talk about our efforts to make Web Fonts faster and more efficient. And, third, our efforts to incorporate Google Web Fonts into all the tools that you use every day in your everyday workflows.

Let’s jump into the crash course. Until recently, the state of web typography has resembled a barren desert. When you are writing your CSS and you decided you would like to style a bit of text on your page. You have been constrained to use the font families that are installed on Microsoft Windows, which is the prevalent operating system. This means we’ve seen a lot of Arial, Courier, Georgia, Times, Verdana. We know these font families very well because they are really the only ones you can use as true, selectable Web-safe fonts. Now, if you compare the visual diversity of the average Web site to the visual diversity of the average magazine, for example, the difference is quite staggering. What you will find in the print world is that fonts are used to convey much more subtle ideas and the variation of fonts in the print world is staggering relative to the Web. So we think this limitation is unfortunate to say the least and it is rather artificial. But we’ve seen nice fonts on the Web before.

So there’s obviously a way to do it. But we do consider these things the ugly work-arounds.

You embed text in images which, basically, means that the content is not semantic anymore.

You are going to have to rely on alt tags, which not everyone uses. And it doesn’t seem — it is an abstraction of the content that you would like to embed in your page. It is not actually the content. And if you embed text in images, your text isn’t selectable so it is not copy and pasteable. And it is not zoomable. So perhaps your users prefer to see the text slightly larger sizes. And if you increase the page size in your browser and you have text in image, it quickly degrades in quality. If it is actually a real font, it looks really nice and the curbs are maintained.

And there is another way to do it. You can use what’s called a Flash replacement technique which, basically, renders an Adobe Flash object on top of the object for your text and that Adobe Flash object contains your font file but it requires a plug-in. And there is a slight flash of unstyled text before the Adobe Flash loads on top of the unstyled text. And the selection field is a bit odd. You can tell it is not HTML. So it is obvious the Web needed a better way to use and select fonts.

So the solution is Web Fonts. Web Fonts free of you of the constraint. You no longer need to refer to fonts that are installed on a user’s local machine when you are writing your CSS stack. Instead, you can refer to any font because, theoretically, any font can be served via HTTP request. So there’s other benefits to Web Fonts. Web Fonts are semantic. What you type, what you mark up into your pages is what you mean to mark up. It is not an abstraction of the content. And because it is more semantic, there’s a load of other benefits. It is more translatable into other languages. It is more accessible to screen readers. It is zoomable. And as Raph is going to talk about just a little bit later, Web Fonts can be super efficient as well.

Google loves Web Fonts. Web Fonts not only make the Web more expressive, more semantic, more accessible, more translatable, but they also make it more searchable. And we think Web Fonts is a win for everybody involved. It is a win for you, the webmasters and content creators of the Internet, because you have access to a much wider font selection to express yourselves and you can make your pages more semantic and accessible.

It’s a win for your users because they can increase font size. They can copy and paste.

They can translate it into other languages. And it is a win for Google users because Google Search is going to become better. Google wants Web Fonts to be ubiquitous, and that’s part of the reason why we launched Google Web Fonts last year at Google I/O.

Web Fonts is not cutting edge HTML5 stuff. It is actually supported in 98% of browsers right now. Now, support for Web Fonts actually goes back to the days of IE4. It has been on and off in the early browsers. Back then it wasn’t a reliable choice for webmasters because not all browsers supported it. When a browser didn’t support Web Fonts, it would have a very bad failure case where the font would just not — your text would just not display. But recently in the last two years, browsers started supporting Web Fonts, which means right now they are a great choice for production applications in Web sites. When I say “the browsers support Web Fonts,” what I’m referring to specifically is the @font-face CSS rule. This is the underlying technology behind Google Web Fonts. What we are showing on screen here is what’s called the bullet-proof syntax which is, basically, the CSS you would use if you wanted to host a font yourself and serve it as a Web font. And so let’s go through it one by one. First we are defining the font family. In this case, Droid Sans. And there is the font style and the font weight. Then we get to the point where we source it. It can either be a URL, which is a remote source or a local source. There are various formats.

Now, it might look like there’s some typos in this snippet, but it ends up this is — everything in here is intentional. Certain browsers ignore certain bits of the snippet. And if you do it exactly like this, you can have reasonable confidence that your font will work across browsers and platforms. But there are some downsides of using font-face directly. As we saw, there is a lot of font file formats that are used. And this is because different browsers require different font formats. And if you’d like to host a font yourself, you’re going to have to, basically, take that font file and convert it into SVG and WOFF and EOT. The second is that you will need to find a host for these font files and one you can trust because if it breaks, your Web page is going to look completely different. Now, for many of you who have a Web host already set up, this is probably not a huge requirement. But think about the bloggers, the mom-and-pop bloggers out there which don’t necessarily have ready access to a Web host. This could actually be a huge deterrent from using Web Fonts.

Third, there’s CSS maintenance involved. As the browsers evolve, they support different font snippets. Just recent — or font-face CSS snippets. So just recently, for example, IE9 actually changed the requirement for what it would look for in the CSS snippet. And it meant that for all the webmasters out there that have used the bullet-proof syntax, they actually had to go back and change how they used it so that it could work in IE9. And there is no telling how many times this will happen again. So there is a bunch of CSS maintenance involved when you host font files yourself. Fourth, there is lots of browser quirks. We all know what browser quirks are. It turns out that certain Android browsers break when you source a Web font via the local selector that we saw in the previous slide.

And, also, Chrome Frame is another example. In certain instances, Web Fonts will simply not work if you are using the @font-face CSS rule in Chrome Frame.

And, finally, there’s licensing complexities involved. Just because you own a font and can use it on your local machine doesn’t necessarily mean you can use it on the Web. And oftentimes, and probably more often than not, the license to use a font as a Web font is completely different. So that’s why Google launched Google Web Fonts.

We’re, basically, looking to reduce all these pain points and make Web Fonts ubiquitous.

If you go to Google.com/webfonts you will be greeted with basically a simple list of the fonts that we offer. Today it is 175 open source, free-to-use Web fonts. And as you browse, you can quickly discover which ones you would like to use on your Web sites and then grab a snippet of code and embed that in your HTML document.

And I am going to show you in detail how that works later.

We’ve designed a couple other advantages into Google Web Fonts. So the first thing is that Google handles the browser quirks. When your end user goes to your Web site or blog, we’re going to sniff which browser and platform they’re on and we’re going to serve exactly the CSS snippet that’s required as well as the font file that’s required. And so you, basically, don’t need to worry about it. You can have the confidence that the fonts you select from Google Web Fonts will work on all browsers going forward.

Because we do this — because we do this dynamically, there is actually a lot of optimizations we can have, too. And Raph is going to talk a little bit about this a little bit later on.

Second, there is no licensing worries because all the fonts are open source. You never have to worry about being constrained for how to use Google Web Fonts. We think this is really important. Third, there’s lots of speed and reliability.

You’re using Google CDN, which is very reliable. Finally, there’s lots of font updates, optimizations and quality improvements. And the message here is that as we continue to improve these fonts and we change it in a central location, all the integrations just get it for free with no further work required. And we’re also working on some innovative font-serving features that we are excited to share with you today.

So meet some of the family. This is some of the 175 fonts that we currently offer in Google Web Fonts. Now, these don’t look like Times and Arial. Some of them look wild and crazy, and that’s what we want. We want the Web to be more expressive and fun and also selectable.

So I encourage you guys to visible google.com/webfonts and choose some of your favorites, but here’s some of mine. I like Pacifico. This is a designed by a gentleman named Vernon Adams, who is a furniture restorer and designer but he is also a very good font designer.

Philosopher. Permanent Marker, which is actually designed by a popular font foundry, font diner, which specializes in high-quality retro fonts.

And Arvo. You get all of that font selection for, basically, 30 seconds of integration. The first thing you do is you include this special snippet in the header of your HTML document. And in this case, we’re requesting the Arvo font family. The second thing you do — this is the easy part — you just use the font you would any other font. So in this case, we’re using Arvo to style an H1 element. And we are using it right next to Arial and Serif. It is just that easy. There is no keys involved.

There is no sign-up required. It is just copy and paste integration.

So far we have talked about what Web Fonts are. We have talked about what Google Web Fonts is and why Google has entered this space. But where are we in the adoption curve? We are really excited about what we’re seeing here. This is our graph since last year at Google I/O. And the graph looks very promising to us. We are seeing up and to the left. It looks like the growth is accelerating. We think this is very indicative of the latent demand from developers, designers like you, basically who have been constrained to using a small set of fonts on your Web pages or blogs but now all of a sudden the restriction is limited. There really is a huge surge of demand from the Internet and we’re really excited about this. So today we’re happy to announce that last week we hit a peak of 110 font requests per day. And that’s across 1.29 million unique domain names, and we’re sustaining about 30% month-over-month growth.

So 1.29 million unique domains is actually a fairly small slice of the actively developed Internet. But what’s really exciting to us is the 30% month-over-month growth because it if it keeps up it seems like Web fonts are quickly becoming part of mainstream design and development practices for the Web. So who is using Web Fonts? The first thing is the signs outside are actually using Open Sans which we are happy to announce is for the first time available via Google Web Fonts today. Open Sans is a great font family. It has got about 12 variants. I encourage you to check it out.

The official royal wedding Website uses Google Web Fonts. The specific way they use Web Fonts is worthy of paying attention to. They designed a virtual guest book. They are, basically, using a handwriting font called indy flower. They have allowed users on the Web site to basically sign this virtual guest book in a way they would have signed a physical guest book. This is something that’s really exciting to us because it is a new interaction that would have been very difficult to build prior to Web Fonts existing.

Mahalo, a popular how-to Web site uses the font Arvo. Sourceforge uses the popular font Ubuntu. And to bring in some holiday cheer, the Norad Santa tracker uses Mountains of Christmas, which is obviously a font that’s popular around Christmastime. But the list goes on and on. It is not just large properties that use Google Web Fonts. It’s lawyers’ Web sites, small businesses, schools, builds, startups like JustinTV, Review Magazine, ZipRealty, lots of Google properties like Blogger, Google TV and YouTube use Web Fonts as well. The list goes on and on. The long tail is very, very long, and it is as long as 1.29 million unique domains.

What’s next for us? What have we been working on at Google Web Fonts? Here is where our three sections are. First we are going to talk about our plans to add more fonts to our library. Currently, we have 175 but we don’t want to stop there.

And in this section, I’m going to give you a sneak peek of something we have been working very hard on which is the new version of google.com/webfonts. As we add more fonts to the library, it becomes increasingly important that we do a much better job of allowing to compare and contrast the differences between Web Fonts and truly understand the fonts that you would like to use in your applications. Second, we’re going to talk about faster fonts.

And, third, we’re going to talk about how we’re integrating these fonts into all the tools you use. We’re trying to make sure that you — the content creators of the Web have adequate font selection. We want you to be able to express yourselves and to build semantic and efficient pages in applications.

We know that if you are in the process of designing an application for a Web site and you don’t find exactly the font that you’re looking for, you’re going to think twice about using Web Fonts. You might actually resort to some of those dirty tactics we talked about earlier in the presentation, and we don’t want this to be true. We want you to find the font you would like to use. We are relentlessly focused on increasing the size of the library that we offer. We started with 18 one year ago, and we have 175 font families in the Google font directory. And we’re aiming for 1,000 within 12 months.

If you follow us on Google — on Twitter at Google Fonts, you will, basically, be subscribing to new font announcements. I recommend you do that because it is kind of fun to see the new stuff coming hot off the press. In the past, we worked with about 45 font designers from all over the world. And we’re commissioning these fonts mostly to be built from scratch and optimized for the screen. So let’s take Lobster. Lobster is a font that’s designed by a gentleman named Pablo Implari. Pablo is a relative newcomer to the font design space. But Lobster has amassed 178 million font views in the last 30 days. And we think Lobster is a great example of the platform that Google Web Fonts is providing to font designers, both established and new to the industry.

We’re really excited about the stage that we can offer these font designers. Lobster has, basically, become a brand. Just a couple months ago I was at South by Southwest and I saw Lobster on T-shirts. I saw it spray painted to the sidewalk. So I was impressed with the way Lobster had spread around. And as we add more fonts to our library, we’re also very committed to keeping the open source license. We think this is incredibly important.

And the reason is because there’s no telling what device or platform will be announced in the future. And we don’t want you to have to worry about not being able to use these fonts. We want you to have complete control over their use. Put them in logos. Put them on T-shirts. Spray paint them to the sidewalk. They are your fonts just as much as they are Google’s. We would like you to know that. We would like you to be creative with your use. So the V1 directory is currently available at google.com/webfonts. But what does the V2 look like? So here’s — I’m going to give you a quick demo of our V2. Just a note. This is a sneak peek. We’re not announcing our timeline just yet, but this is something we are hard at work to productionize.

So what you are seeing on screen here on the left-hand side are filters. And these filters allow you to choose whether you want Serif, Sans Serif, display or handwriting fonts.

You can also choose the thickness of the font you are looking for as well as the language you are looking for. You can search for specific font names if you are looking for something in particular. Up top, you can type some custom text. “Hello Google I/O.” And this is really important if you want to see what certain letters look like. Now, what we found is there’s different — you have a certain idea in mind for when you are choosing a Web font. You know how you are going to use it, in a paragraph, as a logo. And so we designed three view options, and the three view options are sentence view and this is the default view. And it shows, basically, in a string that’s about a sentence long. So you can type a couple more things.

But maybe you know you want to use only five or six characters. So in this case, you will put it into letter view. What happens is the whole interface focuses around those first letters in your preview text. Perhaps we are just interested in how IO looks or maybe just the ampersand, which is an interesting character. Along those same lines, if you are interested in choosing body text, you can put it into the paragraph view. And what this will do is show you what the font looks like in a paragraph.

So let’s take an example. Let’s pretend like we’re choosing the fonts to use on a blog that covers Google I/O. So let’s type “Google I/O.” And let’s have an ampersand there. I will put it into sentence view. And let’s say we want to create — we want to choose a heading font. So we want to a really thick font. So let me go down — I will choose Black.

And so what we’re seeing here are all our options. And so what I’m going to do is add I will add a few to our collection. Our collection is, basically, just a bucket. It is a collection of things we might want to check out later. We are not really sure. We are not committing yet at this stage, but we might like Syncopate. There are two styles of Syncopate. There’s a bold and a normal, which is great. It might come in handy.

Coda looks pretty good. Let’s add that to our collection.

And Bevan looks great, too. Now we have three fonts in our collection.

If I click on the second step “review,” this is where you can get much more detail about the fonts in your collection. And you can see them side by side which we found is a very common use case when selecting fonts, especially if there’s very subtle differences between them. And so here we can decide which font would work best in our application. And so I can rearrange.

And, you know, it looks like Coda is a little bit too bold so let’s just “X” that out, and Syncopate Bold looks pretty nice, so let’s “X” out Bevan. Now, if I want more information about syncopate, I can click the description tab up top and learn about its origins, as well as the character set tab, to make sure that it includes all the characters that I intend to use. And so at this point, I’m ready to grab the code and I proceed to Step 3. In Step 3, we’ve realized that in our first version, Google web fonts, we didn’t do a very good job of communicating the payload to webmasters, how much font data was actually coming down, and so we have focused a lot on communicating that in this last step, and you’ll see, as I check and uncheck the variants beneath the syncopate font family, we have an indicator in the right-hand side right over here that’s changing and telling us what the payload is like.

And so at this step, you’re basically going to ask yourself “Am I going to use Syncopate Normal and Bold or am I just going to use Bold?” In this case, we’re just going to use Bold, so I’m going to uncheck Normal 400 and now I’m just down to a 30K request.

Finally, like we covered earlier, I’m basically going to copy this code into the header of my HTML document and I can then use it in my CSS just like it’s a regular font, right next to Arial and Serif. And so that concludes the live demo portion of things. At this point, I’m going to invite Raph up to the podium and he’s going to talk about the very awesome things we’re doing to speed up web fonts. Raph? [Applause]

Raph Levien: Thanks, David. I’m Raph Levien. I’m an engineer on the Google web fonts team and I’m going to talk to you about faster fonts. So I’m going to go into kind of a case study here, kind of work through an example.

One of the use cases for web fonts is building a logo. When you look at logos, a lot of logos are primarily text. Of course there’s lots of other use cases, and what I’m talking about is going to be good for navigational elements, headlines, all kinds of things.

And, you know, one of the other things about logos is it’s not — most logos are not just pure text. A lot of times they have color, really cool graphic elements in them too.

So the example I’m going to work through is a, you know, surfing company. So this is Pacifico Surf. It’s using the Pacifico font that Dave told you about a little earlier.

And how would you do this kind of the old way? How would you do this before web fonts? You’d make an image out of it. And I’m going to talk about how fast is this? How much — that really comes down to how much is the payload? How many kilobytes is this that have to be transferred from the server to the user’s browser? Of course when you do text as image, it’s not searchable or zoomable, but you can still, you know, get it down to about 7.3K in this particular case. That’s pretty heavily optimized.

So now let’s do the same thing with web fonts, and I mean, you know, it’s — now it’s searchable, selectable, accessible, and if you browse it on a mobile device, for example, then when you zoom, it doesn’t degrade like an image does.

But we’re up to 50 kilobytes. And again, this is going to depend on the use case, how much of a — you know, whether that is an advantage, whether that pays off, or whether it’s actually a little bit of a step backwards for page speed.

So at the bottom of the screen, you can see the HTML snippet that we’re using to select this font, and it’s straightforward. You just pull it in Pacifico.

And then also in the middle of the screen, what you’re seeing is the inspect element view, which is a really, really great tool. If you’re not using this in Chrome, you should be. This gives you a view of all of the resources that your page is using, how big they are in kilobytes, and how much time they’re taking to load.

So this is a really good way of visualizing what — the performance impact of all of the resources that use fonts, images, et cetera. So again, as I go through this, I’ll be showing some graphs that show how many kilobytes we’re actually needing to transfer to get all of this stuff rendered. So I was talking about use cases a little bit. You know, most pages are going to have a lot of different navigational elements, a lot of different headlines or whatever, and if you are doing text as images, then you have to do a separate image download for each one of those uses of text.

If you’re using web fonts, you can transfer the font once and have it apply across all of those graphic elements on the page. So in a lot of these use cases, one — if you build a big site, not just the one-image use, then web fonts — even just the simplest application of web fonts — can be a huge performance win.

So we’re always looking, how can we make this faster? I mean, Google is obsessed with speed.

The faster the pages run, the better the user experience is, the better conversion rates are, so we want to do everything we can to make that faster.

And especially for mobile. So I’m going to talk about that a little bit too today.

When you look inside of a font, you find that a little bit more than half of it typically is in the glyph shapes, the metrics, what actually makes the font the font, and almost half of it is metadata that’s used only for making Windows rendering better.

Well, that’s really important, and in fact we’ve been doing — in the last year, we’ve been doing a lot of work kind of quietly a little bit behind the scenes to make Windows rendering better quality. So almost all of our fonts today have high-quality Windows metadata to improve that hinting. But if you’re on a mobile device, that’s data you’re transferring over the line that you really don’t need.

So in February of this year, we rolled out an optimization that detects when you’re on a Mac, an Android device, or a iOS device — a iPhone or an iPad — in other words, a device that doesn’t need that extra metadata. When we detect that, then we serve an optimized version of that font on the fly that, in this case, brings the request down to 29K, which is a pretty good improvement. And you’ll notice the HTML snippet that you used to select that font is exactly the same. You didn’t have to change anything in your page. All of the users of the Google Font API got this optimization completely for free.

And that is something that would not be possible, using the pure CSS at font face. You get that because of the dynamic work that the Google Font API is doing behind the scenes.

So that’s bringing the request down to 29K. A nice — you know, something that really is practical, even if you’re building sites that are optimized for mobile.

But of course we weren’t satisfied there. Why are we sending the entire font to build this logo when we’re only using 10 characters out of it? What if there was some way that we could ask for just the letters out of this font that we’re actually using? So I’m really excited to introduce today the text equals parameter to the Google web fonts API.

And so you can see it at the bottom, that we add to the request the exact text that we’re going to render. Actually, you can use the letters. They don’t have to be in order and they don’t have to contain duplicates, but here it’s easy to see what we’re doing.

And now the font that you get back is 4.6K. I mean, it’s incredibly tiny. You can use this on a mobile device, and it’s effectively instant. Except 4.6K is the version that we give to Windows, so you can see in the chart the amazing, you know, reduction in size that we were able to get. But you can actually do both of the optimizations to get there, and again, this is done with the same HTML snippet. You don’t have to do anything special to get the mobile Android and iOS optimization.

And when both of these optimizations are applied together, it brings the request down to 2.8K, which is just, you know, amazing in terms of how fast that will transfer over the wire.

So in this case, it’s even significant improvement over an optimized image for that page.

So there’s lots and lots of benefits of using this feature. It’s fast. Especially for mobile.

And we heard a lot about Android this morning. Mobile web is a huge part of the web, and growing fast, and so we really want to optimize sites for mobile web as well.

You can use one font. You can use one text equals request for all of the text on your page. So if you’ve got lots of navigation elements or menus, you can combine all of that into one request to the Google Font API, get one font that renders for all of those uses, whereas images would require one image per use on that page.

And another thing that we’re really excited about, going forward, is that this technique works very well for international fonts. Multilingual fonts can be huge.

A Chinese or Japanese font can get into multiple megabytes. So we’re — all of these — the text equals feature works on all the international fonts in the Google Font — Google web font service as well, and we think this is really key to get worldwide adoption of web fonts.

So I want to step back a little and just go through all of the things that we’re doing to make web fonts fast. In addition to the features that I talked about before, the size optimization for mobile and Mac and the text equals feature, we’re doing a lot of innovative things behind the scenes in our serving infrastructure. We’re setting maximal caching of those fonts. We can do that because they’re open source. There’s no peg 8 that we need to put in place, so we can go completely floor to the — you know, foot to the floor to get those fonts as fast as possible, and that includes our caching strategy. That includes across sites. So if somebody has navigated to a site that uses a Google Font and then they navigate to your site that uses that same font, that font will already be in the user’s cache and there isn’t even a network request to check whether it’s in the cache. It just renders instantly in that case. That’s one of the reasons we’re so excited to see the incredible increase in adoption that Dave was talking about earlier. The more popular the Google Font service becomes, the faster it’s going to be. We, of course, use maximal compression on all of our fonts, and today that’s including the WOFF format on all modern browsers. On browsers that don’t support it, we use different forms of compression, but we use the maximum compression that’s available. I talked about the optimizations, the size optimizations for mobile, text equals, and, you know, don’t forget that everything is being served from Google’s worldwide infrastructure, so we’ve got data centers around the world and you’ll get the fonts served to the user from their nearest data center, no matter where they are and no matter where the site developer is.

So, you know, we’re hard at work. That’s a big part of what we do is building the fastest infrastructure for serving web fonts that’s possible.

But the integration for you is easy and quick. The 30 seconds that you saw is all you need to integrate the Google web fonts and you get all of the benefits, including all the speed, as part of that. So next I’d like to talk about web fonts in more places. You already see web fonts integrated into Drupal, WordPress, and Google properties such as blogger.

The Drupal and WordPress plug-ins were done, you know, by independent developers on their own initiative, and to get the list of fonts, they use a combination of, in some cases, hard wiring in the list or in some cases scraping it off of our HTML.

And so we figured there must be a better way to do this, to get a fresh, up-to-date list you know, with all the fonts that we’re launching every week now, you know, that list is growing fast. And so we’re announcing currently in a trusted tester status the Google web fonts developer API, which gives a fresh up-to-date list of those fonts. So if you’re a developer and you want to put Google web fonts in the menu of any of your products, come see me afterwards or send me an e-mail and we’ll get you listed in the trusted tester program, and of course we’ll see this rolling out soon and benefiting all of the users.

We also want to see it integrated into more tools. A lot of web developers use the Adobe Creative Suite — In Design, Photoshop — and so we want to — you know, we want to see Google web fonts used everywhere, including in these tools, and so I’m really happy to introduce to you Darren Glenister from a Swedish company, TypeDNA, and he’ll be talking to us about the tools that his company is developing to get Google web fonts in products, including the Adobe Creative Suite. [Applause]

Darren Glenister: Thank you, Raph. My name is Darren Glenister. I’m development director for TypeDNA. TypeDNA is a Swedish company that specializes in font technologies.

We create tools that actually analyze characteristics of fonts and help designers choose and use fonts. TypeDNA’s core product is a unique font manager that works stand-alone and also directly in Adobe CS5. I’m going to start by showing you a quick video that highlights TypeDNA’s features. [Video.]

Darren Glenister: So over the past few months, we’ve been using the Google web font developer API to enhance our CS5 plug-ins, and so today I’m proud to announce the inclusion of Google web fonts direct inside Photoshop In Design Illustrator via TypeDNA.

So this here is TypeDNA running in Photoshop. Many of you probably use Photoshop to mock up web pages or applications. I will show you how TypeDNA gives direct access to Google web fonts and how they can be applied to this example web page template.

By default, TypeDNA shows fonts from a hard drive as you can see listed you here. To get access to the Google web fonts, I click the web fonts channel here, and then select Google.

Now, here I have a list of Google web fonts. TypeDNA’s tools are available to me to help me find the font I want. Tools that TypeDNA provide are Similarity, for finding similar fonts, Harmony for mixing fonts, Smart Choice for suggesting fonts, and attribute filters for detailed filtering by weight, width, italic angle, and optical size. And all of these tools work by character analysis and do not use any metadata. For my design, I’m going to pick two fonts.

Firstly, a headline font and secondly a body font.

Let’s start by finding a headline font. I want to use something quite heavy, but rather than scrolling through hundreds of fonts, I’m just going to use TypeDNA’s attribute filters. All I need do is select the weight filter and “very heavy.” And as you see now, the results are filtered.

From these results, I personally quite like Candal but I still don’t think it’s actually heavy enough so what I’m going to do is use the TypeDNA Similarity function to find more fonts like Candal Regular. So now I’m shown a list of similar fonts. And again, this is all by characteristics. So what I’m actually going to do is use — I’m going to pick Paytone One Regular as the font, and as I do is double-click here and it installs it locally on my machine and it’s ready to use. And as you can see here as well, I actually have the code that I need to add to my HTML. I’m going to find a second font now. I’m going to find a complementary body font and I’m going to do this by using TypeDNA’s Harmony feature. So as I have Paytone One selected, all I do is collect Harmony and then click Harmony body and then TypeDNA analyzes the characteristics of Paytone 1 and makes suggestions of body fonts that work well with that headline font. So I’m actually going to go for Arvo Regular as my body font and again, all I do is double-click and this time I’m going to as to view the installed fonts. So now I get the fonts that I’ve actually installed on my machine that are suitable as web fonts. And now I’m outside of the Google web font directory but I still have access to the CSS code required to use the font.

So to apply these fonts in my document, all do you is go back to my document, I pick the headline, apply Paytone, then I pick the body and apply Arvo Regular and as you can see, it’s very simple to bring Google web fonts direct inside the CS suite via TypeDNA.

I just want to show one more example of a tool that we have. This is a page that I created earlier, and this is — this is a font I actually chose, and this font is a font that’s on my system. I know it’s not available as a web font, so what I’m going to do is use TypeDNA to suggest to me similar Google web fonts that are available.

So I go into my local directory. I click the plus here, and then ask to tell me what the current font is in the document, which is Abadi MT Condensed. I just click here and then click the similar web fonts body which then takes me into Google and it makes suggestions of similar Google web fonts. I’m going to take the top match here, double-click to install, view, and then swap it out and as you can see, there was hardly a change, but that font is free to choose, direct from the Google web font directory. So that gives you an idea of what TypeDNA have been doing with the Google web fonts directory, and over the coming weeks we’ll be releasing tools you’re going to use directly online. For example, we’ll be releasing some tools that reads all the fonts from your hard drive and you can use similar fonts from the Google web fonts directory. I thank you for your time and pass you back. [ Applause ]

David Wurtz: Thanks very much, Darren. So let’s recap. We first started with a web fonts crash course where we learned what web fonts are and why you should potentially be excited about them. We then talked about Google web fonts, which is Google’s offering in the space and is available at Google.com/webfonts. We then talked about Google trends. The exciting trends we’ve been seeing with web font adoption. And, finally, we went into more detail on what Google web fonts team is working on, specifically, our plans to add more fonts to our library and to redesign the front-end browser experience for those fonts, to make web fonts faster, and to integrate them into all the tools that you use every day. So, with that, we’ll go to questions.

Hi. Have you thought about using — getting some mathematical fonts? Mathematics is very font-intensive. I’m involved with an open source math project called mathJax, which is a JavaScript engine for displaying math.

And it’s heavily dependent on fonts, and the subsetting, the caching, all the things that you mentioned are even, you know, huge advantages in this case. Because you’re always working with huge numbers of symbols in the font but any one page will only use a small subset of it..

David Wurtz: So we hear a lot of requests like this. There’s icon fonts. There’s symbol fonts. There’s mathematical fonts. The truth is we’re not prioritizing it at the moment, but we definitely recognize there’s a lot of opportunity to do this..

Q: You could actually go a long way by supporting one font. There is the sticks font, which is an open source font that a bunch of organizations and publishers got together and designed. And most, you know, online math is starting to use that font..

David Wurtz: That’s great to know. Thank you. I’m going to take one from our moderator page.

“What are your thoughts on served web fonts and their inability to render 100% properly on Windows 7 PCs? Some fonts look great, and some are just plain unusable.”

Raph Levien: So this is a really interesting question. First of all, we’re doing a lot of work. We’re going over the fonts that are currently in the directory, and we’re commissioning new fonts. We’re doing a lot of work to improve the quality of Windows rendering. It’s not really just Windows 7. It’s all versions of Windows that have two rendering engines. There’s GDI, and then there’s the new rendering engine that’s used, among other places, by Internet Explorer 9. And the new rendering engine is actually capable of a lot better quality.

And we’re again doing work on Google fonts to make the best use of this. We’re aware of this and definitely making a lot of progress on it.

Q: Great to hear about your progress over the last year. 1,000 new fonts sounds wonderful.

Good work. I have one question about the markup that you generate. You say you generate CSS code, but you’re not clear you generate HTML code — right? — with CSS kind of tucked in there..

David Wurtz: Right.

Q: In my — aesthetically, I’d rather use CSS code. I think it looks better. It sort of puts the presentation into one container and the HTML into another. Others may disagree.

And I know you also generate the CSS code if you go into advanced techniques. Would you consider switching, or is there a reason you choose to generate HTML inside CSS?

Raph Levien: Yes, there is a reason. And it’s, basically, the import rule for CSS actually causes some blocking that you can serialize the loading of the different CSS elements on some especially older browsers. So, if you are designing primarily for newer modern browsers, then doing it completely in CSS is a great option.

David Wurtz: Let’s take another one from the moderator.

“Will web fonts work with any potentially offline solution, such as the mobile web app?”

Raph Levien: That’s a great question. I really don’t have an answer for it. It’s kind of an emerging space..

Q: You mentioned that the fonts are open source. Which license is being used?.

David Wurtz: We actually use a variety of licenses. The most common one is OFL..

Q: Does that allow for derivative works?

Raph Levien: Yes, it does. Both of the primary licenses we use, Apache 2 and SIL open font license, do allow for derivative works. There’s some — you have to do attribution. And there’s some rules about, you know, what you name the fonts that you have to kind of respect the wishes of the font designer around the names of those derivative works. But you’re free to mix them all together, you know, add your own characters, basically, do anything you like..

Q: And then, related to that question, the gentleman talked about the math font that is available. Is there a model for people to contribute fonts in your repository at this point in time?

Raph Levien: We work with lots of font developers. There’s no kind of — you know, self-serve mechanism –.

Q: So no.

Raph Levien: — now. But, if you’re developing fonts, we probably want to talk to you.

Q: All right. Thanks..

David Wurtz: I’ll take another one from the moderator. “Great job on the optimizations. Is it possible to reduce HTTP requests as well when using multiple web fonts?” So the answer is yes. That’s exactly what the version of Google version 2 web fonts will do. It’s support in v1 as well. Basically, in the snippet that you include, it’s possible to just request multiple fonts in that one HTTP request. But the v2 makes it really simple for you to understand the payload differences. And, as you uncheck and check the variants that they’re using, you’ll see the snippet actually change in realtime.

Q: Just wanted to preface my question with the statement that I have a company I work for. We’re real happy with Google font API and what it’s been able to do for us. However, as a digital agency, we’re involved in fairly highly creative works. And we’ve used Typekit and others because they’re integrated with several popular and vast font foundries. And the fact that we pay for it — pay for that service gives us that ability to access those — that large library of fonts and appreciate what you’re doing with adding more fonts to the library. But the fact that you plan to stay free, I gather, seems like that it might prohibit you from getting some more of those other foundries involved or, I guess, better-looking fonts..

David Wurtz: First of all, I want to say we actually love the fact that there’s many different options in the space. So, to remind you why Google is in the space, we want to see web fonts as ubiquitous technology. The fact that Typekit is doing amazingly well is really great for Google as well as it is for the Typekit folks. I think it’s true that, if we decided to do some type of commercial offering, there would be lots of foundries that would be more willing to hand their fonts over to our serving infrastructure. But what we’re finding and what our goals is is that we want to grow the pie. We want to make sure that the folks that are just the casual bloggers have sufficient access to high quality fonts. And we’ll fill the market from below, make a solid foundation. And then there could be other commercial offerings like Typekit, which will partner directly with the who’s who of the font industry and bring really high quality fonts to users. So we see it working synergistically, actually.

Q: When I advocate people using Google webkit web forms, I say they should use JavaScript API because it allows you for to use fallback font to have another font size. Like, when you fall back to Arial and you have a font that looks great in 300 pixels, you don’t want to have 300 pixel Arial on the page. So can the previewer also generate Java code for me as an extra option? Because that would be something to promote that feature because it’s much more bulletproof than just putting the new font in.

Raph Levien: That’s a great question. Today, no. Certainly, as we develop version 2 of the directory, that’s one of the things we’re going to be look at. You’re absolutely right.

JavaScript API has some real advantages to controlling the fallback fonts with the way the fonts stage in a lot better. In the case where the font is, you know, is slow to load or if the Google web font server goes down, which it hasn’t yet, by the way, you have to plan. You have to prepare. It’s more complicated to integrate the JavaScript.

And so, you know, it’s there as, basically, a feature for more advanced developers. There’s definitely more that we can and should do to advocate it and to make that adoption simpler.

So thanks for bringing that up..

David Wurtz: Let’s take another one from the moderator. “Is there some plans to bring web fonts to Android?” The good news is that Google web fonts do work in the Android browser, so, in a way, they’re already there.

Raph Levien: 2.2+..

Q: I think I tried it in one browser. I forget which one. Does text shadow and all that stuff work on the web fonts?

David Wurtz: It does. Yeah..

Q: It does. Maybe it was just the browser.

Q: How is the support for international characters in the current — in the family of web fonts that are in the Web site? Do they have an extended character set, or do they mostly support Latin and Western European?.

Raph Levien: Another great question. We’ve been slowly building out the range of international character set. So we have — most of the fonts are supporting Latin. A growing number of the fonts are also supporting Cyrillic and Greek and a few other, like, Latin extended ranges. There are a few others. We actually have a lot of Khmer fonts in the directory. For the more complex scripts, we’re working with the browser manufacturers, of course, including Chrome, to really make the support for those scripts bulletproof. One of the things that we really try to do in the Google web fonts is make all of our fonts rock solid. We don’t want to have anything in there that only works a little bit or only works in some cases. So we’re really trying to make the support for that 100% rock solid before we roll it out. But it is definitely important for Google to make these fonts worldwide, all languages. And so that’s what we’re working on..

Q: Thank you. Very good.

David Wurtz: Let’s take one more question..

Q: With regard to performance, if I have a page and I load A, B, C and a second page loads D, E, F and I get to a third page and I load A, C, F, what happens on that third page?

Raph Levien: Well, so that’s a great question. And we’re — we are going through our data and trying to figure out how to optimize those cases. So, you know, it might load a different font. Or we might be able to figure out how to aggregate and optimize those. So that’s one of the — again, going forward, one of the things that we’re going to try to figure out what is the most optimized way that we can respond to those requests?

David Wurtz: All right. Thanks, everyone. If you have any more questions, feel free to join us up here. We’ll be hanging out. Thanks.

[ Applause ]


The original YouTube page is at youtu.be/QTX1lU97z08 and a full transcript is available.

This entry was posted in News. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Giuliano
    Posted 23 September, 2011 at 12:39 pm | Permalink

    Google Web Fonts it’s a terrific resource that I use a lot in my work. That said, I hope you will improve the average quality of the font and not only the number. Most of the fonts are not usable for professional project (due to poor anti aliasing in windows or missing weights, not taste). Why I understand the need of variety (and some of the less quality fonts sometimes can be used as display font), wouldn’t be possible for Google to hire some of the best font designer to design 10 or 20 family font optimized for the web? We designed websites with 4 font families for years, and now we have also a lot of fantastic typefaces from paid services. But sometimes using those services is not possible or advisable (ie. web fonts for wordpress themes) so i am sure having 10 or 20 good free fonts would fill a greater needs than one can think.

Post a Comment

Your email is never published nor shared. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*

  • What we do

    Understanding Fonts is a type design training business. If you'd like an event in your college or city, let Dave know: dave@understandingfonts.com