Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
228 lines (119 sloc) 10.7 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Multi-Lingual Fonts with Typotheque and Font Face | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="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 &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/illustration-friday-idle.html" title="Illustration Friday - Idle">❬</a>
<a class="next" href="/book-reviews-for-august-2009.html" title="Book Reviews for August 2009">❭</a>
<time datetime="2009-08-06T00:00:00-07:00" pubdate><span class='month'>Aug</span> <span class='day'>06</span> <span class='year'>2009</span></time>
<h1 class="entry-title"><a href="/multi-lingual-fonts-with-typotheque-and-font-face.html">Multi-Lingual Fonts with Typotheque and Font Face</a></h1>
<div class="entry-content"><p>I <a href="" title="Font in your face | Nimbupani Designs">wrote about the great debate on @font-face</a>, and was pleasantly surprised when Peter Bilak of <a href="">Typotheque</a> invited me to beta-test their webfont service.</p>
<p>The primary advantages of Typotheque&rsquo;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.</p>
<h3>How to Use Typotheque Webfonts</h3>
<li>Create an account with Typotheque.</li>
<li>Purchase fonts from a list of available webfonts.</li>
<li>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).</li>
<li>The service generates a CSS file and gives you the link to it that you just need to add to between <code>&lt;head&gt;&lt;/head&gt;</code> of your HTML page.</li>
<li>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.</li>
<li>If you are more street-savy, you might be able to download the font, but you can&rsquo;t install it on your machine as it is not strictly a TrueType font.</li>
<p>Typotheque&rsquo;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.</p>
<p>If you would like to know how the interface looks like, head over to <a href="">Andy Clarke&rsquo;s blog post on it</a>. </p>
<h3>Multi-Lingual Fonts with @font-face</h3>
<p>Here is my <a href="">demo page with Typotheque font faces</a>.</p>
<p>As you can see, I have used their first Devanagri webfont &ldquo;Fedra Sans Hindi&rdquo;. It renders beautifully in browsers supporting @font-face on Windows. However, it is a different story on the mac. See the picture below:</p>
<p><img src="/files/typotheque-multilingual-demo.png" alt="Typotheque Multilingual Demo" /></p>
<p>Apple uses their own proprietary <a href="">Apple Advanced Typography</a> (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:</p>
@font-face {
font-family: Lateef;
src: url(../fonts/LateefRegAAT.ttf) format(&quot;truetype-aat&quot;),
url(../fonts/LateefRegOT.ttf) format(&quot;opentype&quot;);
<p>Currently, in the CSS 3 draft, the following font formats can be specified &ndash; True Type (supported by Opera, Safari, Firefox), OpenType (Opera, Safari, Firefox), Embedded OpenType (Internet Explorer), SVG Font (Safari & <a href="`">Opera</a> &ndash; I cannot confirm if Firefox supports it, IE definitely does not). </p>
<p>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. <a href="#comment-2942">John Dagett explains it quite well in his comment</a>.</p>
<p>They have a point. Recently, Apple started <a href="">supporting Open Type rendering for Arabic scripts</a> (which means Typotheque&rsquo;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.</p>
<p>On the whole, I think this service has great potential and is a simpler alternative to <a href="">Typekit</a> or <a href="">Kernest</a>.</p>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<time datetime="2009-08-06T00:00:00-07:00" pubdate><span class='month'>Aug</span> <span class='day'>06</span> <span class='year'>2009</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="/assets/divya.png" height=50> <a href="">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];