Streamline your web font requests: introducing “text=”

MAY 10, 2011

By Raph Levien, Engineer, Google Web Fonts

Last week, the Google Web Fonts team announced a new feature on the Google Web Fonts Blog. Since we’re discussing this feature today at Google I/O, we’d like to share this news with Google Code Blog readers as well.

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. Of course, the font you get back is optimized even if there are duplicate character in the request.

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! .

We hope you enjoy this new feature.

Raph Levien is an expert on fonts and graphics technologies. Raph designed Inconsolata, one of the fonts available on the Web Font API. Raph enjoys photography and spending time with his family.

Posted by Scott Knaster, Editor

posted in: