Typotheque Web Font Service preview


Up until now, if you wanted to use fonts on a website, you were limited to one of the dozen or so ‘web-safe’ fonts. Using other fonts required you to convert the text into images, or to use some hacky Javascript or Flash solution such as sIFR or Cufón.

In a relatively recent development, browsers which support the @font-face rule can access fonts embedded in websites, but most font companies have been reluctant to permit use of their products on the web because of the high risk of software piracy. Typotheque, however, is working on a web font-embedding system which is based on W3C standards and provides a secure, reliable way to use fonts whose files are hosted on a global network of servers (cloud hosting).

How will it work?
Owners of Typotheque font licenses can create embeddable fonts via their Typotheque accounts. Simply enter the URL(s) where the font will be used and the languages to be supported, and our system instantly generates a short block of CSS code. Paste the code into your website, and you are ready to start using the font. You will not work with actual font files, but with the CSS code linking to the font files. For most browsers TTF subsets are used, for Internet Explorer, fonts are converted to EOT format on the fly.

Font Subsetting
Regular Typotheque fonts support over 100 languages and advanced typographic features such as small caps, different numeral styles, alternative characters and special symbols. Web browsers, however, can access only a small fraction of those characters. Removing these inaccessible features makes the files much smaller, so they download much quicker. Users can specify which languages to support.

On the sample below we use Fedra Serif Multiscript, a font with over 2,500 glyphs. The original font file is 1,062kB. For the purpose of this sample, it has been shrunk to 234kB, while still supporting French, Polish, Greek, Russian and Arabic. All other unnecessary glyphs, and OpenType features were removed. The other font on the page (Fedra Sans Pro Bold) is normally 510 kB, and now reduced to 38kB.

Sample of @font-face embedded Multilingual fonts
Multilingual Sample

Sample of @font-face embedded fonts
Standard Sample

Supported browsers
The @font-face rule is supported by Firefox 3.5, Safari 3.1, Opera 10, Chrome 2.0 and Internet Explorer 4.0 and later. Our system is thus compatible with more than 94% of all browsers in use. For older browsers you can define a list of default web-safe font stacks. See also this article: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers.

Known issues:
While Latin-based, Cyrillic and Greek work consistently across all supported browsers, there is inconsistent support for TTF/OTF. Languages such as Arabic require advanced text shaping. Different platforms and browsers support different rendering technologies to enable text shaping. Safari on Mac renders OTF/TTF fonts correctly (see this image), Firefox and Opera under Mac OS X require AAT fonts. On Windows and Linux, OTF/TTF fonts will render correctly.

Typotheque Web Font Service is coming later this summer. Follow us on Twitter, or subscribe to our RSS feed.