For years, web designers have been restricted to a paltry range of fonts.
It’s not that operating systems don’t support many fonts. They do. It’s just that web sites must work across all kinds of operating systems — and all version of operating systems. So designers and developers tend to focus on the “common denominator” fonts.
Still, that hasn’t stopped them from dreaming of a day when they could freely pick and choose from nearly any font with a high degree of confidence that most web users would actually see it.
That day has arrived.
Over the past few months I’ve followed the emergence of three web-based font providers:
With web-based (hosted/cloud-based) fonts, web browsers are freed from relying on whatever fonts are available on the user’s computer or mobile device. Here’s a basic example of a range of Cyrillic fonts available using Fonts.com.
Implementing hosted fonts is a relatively simple process. You use the CSS @font-face property and reference the font provider within the web page header.
Modern browsers support @font-face, but it has taken some time for font providers to arrive on the scene.
Relying on an external font requires relying on a provider that can deliver that font quickly. You don’t want any lag time as web pages display. And while I can’t comment on which of these three providers delivers fonts fast enough and with the most reliability, I will comment on which provider supports the most languages.
Surprisingly, that provider isn’t Google.
First, let me demonstrate the value of a using hosted fonts to support different languages. Below is what a Mac user may see when visiting the Facebook global gateway:
Those empty boxes are where some Indic languages would have displayed if the fonts were available. With a cloud-based font, these languages would display no matter what fonts were available on the user’s operating system.
However, there is an important caveat to keep in mind. Let’s say a vendor provides a font that supports every major language — several thousand characters. Imagine the lag time of trying to download that enormous file. This approach isn’t very practical. But language-specific fonts are more practical — if not inevitable.
So what provider is the leader in providing multilingual support?
According to the Fonts.com web site, they support more than 40 languages across multiple scripts:
We also carry a variety of world language fonts to cover non-Latin scripts such as Cyrillic, Greek, Simplified and Traditional Chinese, Japanese, Korean, Thai, Arabic, Hebrew, Armenian and Devanagari. In addition to this versatile selection, Fonts.com Web Fonts leverages patent-pending technology to overcome the challenges of serving East Asian fonts.
I was surprised that I couldn’t find a font that supported anything other than Latin 1 characters in Google’s Font directory. I’m sure it’s only a matter of time before that changes. (Update: Just a few hours after posting this blog entry, Google announced support for Cyrillic, Greek, Hebrew, and Khmer scripts. Thanks Tony for the heads up.)
Typekit also only supports Latin-based fonts. But the company appears to be working on offering support for either Hebrew or Arabic (or both) in the near future.
Hosted fonts and the global gateway
As I mentioned above, a hosted font that supports many scripts is likely to have a negative impact on web page performance. That is, the more characters a font supports the longer it will take to send over the Internet to the user’s browser. So how does a company such as Facebook, with support for so many scripts on its global gateway, make use of a hosted multi-script font?
First of all, you could argue that those empty boxes are not a big deal. After all the intended users are likely to have the necessary fonts on their operating systems, so I’m talking about an edge case here. That said, empty boxes are empty boxes — which is a problem in need of a solution. So I’d recommend creating a “global gateway optimized” font that companies could leverage solely for their gateways. For Facebook’s global gateway, this font would include a small subset of characters from all of the supported languages — with the sole purpose of supporting a global gateway. For instance, instead of including a few thousand Chinese characters, this font would support only those characters required to display text strings that say “Chinese”, “Republic of China” etc. Perhaps the overhead of a unique font for a very unique web page is overkill, but I’d still love to see it happen. For more thoughts on the global gateway, check out my newly updated book The Art of the Global Gateway.
We’re clearly in the early days of hosted fonts. The visual impact could be significant. Consider this recent Internet Explorer 9 demo complements of Microsoft and Typekit.
What do you think? Will your company be using cloud fonts in the future?