Divya Manian

RSS Feed Youtube Channel Github

Multi-Lingual Fonts with Typotheque and Font Face

I wrote about the great debate on @font-face, and was pleasantly surprised when Peter Bilak of Typotheque invited me to beta-test their webfont service.

The primary advantages of Typotheque’s service is ease of use and faster load times (as compared to others). It only uses CSS (not javascript) to generate the font stack. By using font subsetting, the service generates smaller font files.

How to Use Typotheque Webfonts

  • Create an account with Typotheque.
  • Purchase fonts from a list of available webfonts.
  • Create a project on your account. Here you set which fonts you would like to use, the language you will use the font in, and domain it will be used in (you can set multiple domains).
  • The service generates a CSS file and gives you the link to it that you just need to add to between <head></head> of your HTML page.
  • You cannot access the CSS file by loading the url given above directly in your browser. Same is true for the font files as well.
  • If you are more street-savy, you might be able to download the font, but you can’t install it on your machine as it is not strictly a TrueType font.

Typotheque’s business model is to charge according to bandwidth usage (which seems fair). The exact prices are not available yet (nor are the EULAs for webfonts) and might just be the deciding factor in how successful this service becomes.

If you would like to know how the interface looks like, head over to Andy Clarke’s blog post on it.

Multi-Lingual Fonts with @font-face

Here is my demo page with Typotheque font faces.

As you can see, I have used their first Devanagri webfont “Fedra Sans Hindi”. It renders beautifully in browsers supporting @font-face on Windows. However, it is a different story on the mac. See the picture below:

Typotheque Multilingual Demo

Apple uses their own proprietary Apple Advanced Typography (which is a set of extensions on top of True Type Font) for rendering complex ligatures which are found in Arabic or Devanagari scripts. There is a way to specify fonts such that you can provide the AAT format for Mac OS X and other kinds of fonts for the rest of the browsers:

@font-face {
font-family: Lateef;
src: url(../fonts/LateefRegAAT.ttf) format("truetype-aat"), 
url(../fonts/LateefRegOT.ttf) format("opentype");
}

Currently, in the CSS 3 draft, the following font formats can be specified – True Type (supported by Opera, Safari, Firefox), OpenType (Opera, Safari, Firefox), Embedded OpenType (Internet Explorer), SVG Font (Safari & Opera – I cannot confirm if Firefox supports it, IE definitely does not).

Unfortunately, Typotheque does not generate the AAT format font for their multi-lingual webfonts (you can see in my demo that the Hindi text is not rendered correctly, in all OS X browsers except Firefox, because of that). Firefox 3.5 on the Mac OS X, interestingly, does not use the font specified in the @font-face if it is not an AAT type of font. John Dagett explains it quite well in his comment.

They have a point. Recently, Apple started supporting Open Type rendering for Arabic scripts (which means Typotheque’s Arabic webfont will be rendered correctly by all browser in Mac OS X 10.5). Typotheque feels that they would expand this to other scripts as well (like Devanagari) in the future. Updating their service to support yet another font format would require weeks of work.

On the whole, I think this service has great potential and is a simpler alternative to Typekit or Kernest.

Comments