 Hey everyone, welcome back to the state of the web. My guest is Dave Crossland. He's the program manager for Google Fonts. And today we're going to be talking about the state of web fonts. What are they, how to use them effectively, and what's new. Let's get started. So Dave, thank you for being here. My first question is about why web fonts? What do they bring to a website beyond the standard fonts like Helvetica? Well, web fonts really express us and kind of feeling for organizations, they express a brand. And you can have a web page without a video, but you can't have a web page without text. You have to have fonts. And so a brand at its core would be like a logo, a color, and a typeface, or a font. And so web fonts bring the kind of rich design that we have in print media to the web. And according to the HTTP archive, nearly one third of websites use a font from the Google Fonts API. So why are developers turning to the Google Fonts API? I would say that Google Fonts is fast, easy, and free. And so on our analytics page, we've clocked up over 22 trillion font views in total since the service launched in 2010. And I think that being on Google's content distribution networks, we benefit from cross-site caching. So when you visit the first website that uses a font like Roboto, it's downloaded, and you may see some latency there. But then on all subsequent websites, which use the font from Google Fonts, then it's in the cache and loads instantly across the different websites. We also try and make it really easy. So the Fonts API abstracts a lot of the complexities of web font technology from you. So we serve different font formats to different browsers. For example, with better compression formats like Waf2, only the newer browsers support those. And so we serve Waf2 files to those newer browsers, and we serve other formats to older browsers. And then finally, we make things free, and we have a directory of hundreds of choices which everybody can choose from. Now, of course, if you want a particular typeface, then it may not be available in Google Fonts, and you would go and license that font for your usage. But not everybody has the sophistication in design or the resources to license fonts. And I think it's important that everyone in the world is able to do typography. So I don't know if developers truly appreciate how complicated web fonts are under the hood. I got a taste of this when I was at YouTube a few years ago. I helped change the default font to Roboto. And it was not as easy as just changing the font family CSS style. There's a lot you need to do to make sure that it goes smoothly for the users and they have a good experience. For example, YouTube users are from all around the world. They have different languages, different alphabets. What are some of the things that developers need to be concerned about for an international audience? International users face a challenge because the file sizes of fonts for them can be larger than just for European languages. Traditionally, Google Fonts has done a kind of slicing of fonts into language or writing system sets. So we might have, for example, Latin, Latin Extended, Cyrillic Extended, Greek, Greek Extended, and Vietnamese. That's your current support for Roboto that's used on YouTube. We also support other languages, Hebrew, Arabic, Thai, many different Indian writing systems. And the biggest challenge has been for Chinese, Japanese, and Korean fonts. A typical font for Indian languages can maybe be two or three times larger than a European font. But for East Asia, it can be 100 times bigger. And so we've been able to use a number of technologies. For example, Waf2 Compression, which is now a W3C standard this year. And also the app font face CSS has a new aspect called Unicode Range. Unicode Range allows us to slice the fonts into pieces dynamically. And the browser will only download the pieces that it needs. So that means that we were able to slice a Chinese, Japanese, or Korean font into over 100 slices. And therefore the latency of each slice is similar to your European font. This means that the experienced latency is much better. And because the slices are cached across different domains, then the font gets faster and faster to load over time. Custom fonts have also been used for icon fonts to show images. And more recently they've been used for emoji as well. So we're moving beyond just text and onto these other ways that we're using to communicate. But it's not without its own challenges, right? That's right. Font technologies are always improving and evolving. And the use of emoji as a kind of special case of icon fonts is particularly interesting. I think that there's a debate in the web development community about how to best approach this. Using images for icons, whether that's PNG or SVG vector images, has some advantages there. One of the advantages to using icon fonts is that aligning icons with text in labels is often a common use case. And getting the alignment onto the baseline of text can be tricky when you're dealing with two elements, a text element and an image element. And so icon fonts can play a good role there. They also have good legacy support because obviously text systems work everywhere. Unfortunately for emoji and color fonts, that's a little bit more complicated because there are different color formats for different platforms. And so one font file needs to have a lot of data to support all of the platforms at once. And they can look different on different platforms. So yeah, emoji as web fonts is still, I think, kind of as a cutting edge thing, but it can add consistency and I hope we see more developments of that in the future. And going back to the Roboto at YouTube example, one of the things I remembered that was kind of tricky was when we would have font weight bold in our styles, that would default to weight 700 by the browser. But our designers decided that it looked best as weight 500. So we actually had to go back and change all of our styles from font weight bold to font weight 500. And it became kind of a new way that we had to ingrain into our style development. But there's something new that's coming out called variable fonts. How would they help address the situation? Yeah, variable fonts can help a lot. It's a very exciting new technology. It's part of the open type standard, which is the font format that's widely supported in pretty much all platforms today. And variations allows you to do runtime interpolation between different sort of styles or faces within a font family. So traditionally, you would have like a thin weight, a regular weight, a bold weight, an extra bold weight. And in CSS, you've only had up to nine weights, 100 to 900. With variations, then you were able to specify weight 154 and dial in a brace specific and sort of dynamic weight. You can animate these weight changes using CSS and animations. And in CSS4, there's more direct support for this. So does that mean that every font is now going to be able to be completely customizable or are only a few fonts going to be eligible for this? Well, it is something that font developers need to add to fonts. And so in that way, it breaks down the traditional wall between the font maker and the font user. And so variable fonts create a kind of dialogue between the two. So as a font user, you can customize the font but only in ways which the font maker has provided for. And so that means that you don't need to become a type designer yourself, but it means that you have that flexibility that you didn't have before. And the variations are not only for font weight. There's also font width, there's slanting and there's also optical size. And those are all part of the open type standard today. Optical sizing means that when you change your font size, from 10 point to 70 point, then the letter forms will actually react and respond to that change. And so as your font size gets larger, the letter forms will become more elegant and as it gets smaller, they can become more legible, more readable. There's also all other kinds of variations you can imagine which aren't part of the standard and are specific to each font, things like rounding and many creative options. Google Fonts is commissioned to sort of experimental trial fonts from type designer David Burlow at Type Network. The first is DecoVar, which has a lot of variations which are decorative. So rounding different kinds of serifs, different kinds of stroke patterns. And this can be used as a kind of graphical device because variations can be animated, I think there's a lot of potential there. The other typeface is Amstelvar. And Amstelvar is a text typeface and it has a set of parametric axes which go far beyond just weight and width and into things like the ascended length, the ascender length and a lot of variations which can be used together to create more readable text. I'm especially interested about variable fonts. We're gonna have to have you back on the show once they're a little bit more established and we can talk about the state of them. But where could developers go if they wanna learn more about any of these technologies? Microsoft Edge has on their developer site a really good variable fonts demo site. So that's a great place to learn more about variable fonts. There's also the design.google.com slash fonts articles website where the Google Fonts team publishes articles about type and typography in collaboration with the Google design team. And then there's also material.io where you can get the material design icons font and learn more about material design guidelines. Well, there you go. The links are in the description so go check them out. Share your web font stories in the comments below. Don't forget to like and subscribe so you can tune in for another episode of the State of the Web every other Wednesday. Thanks for watching and we'll see you next time.