Truetype Web Fonts Source

September 12, 2012 Markdown source

1---
2title: 'Truetype Web Fonts'
3date: '2012-09-12'
4published_at: '2012-09-12T21:39:00.001+10:00'
5tags: ['css', 'development', 'fonts', 'javascript', 'web']
6author: 'Gavin Jackson'
7excerpt: 'At work we use a couple of custom truetype fonts. Traditionally, to get these fonts rendered on our website our graphic designer would create images and deploy them to our web server - as you could I''m...'
8updated_at: '2013-04-12T16:03:41.390+10:00'
9legacy_url: 'http://www.gavinj.net/2012/09/truetype-web-fonts.html'
10---
11
12![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKipfC1TZRUSCsiukh4gqa4rHyCXVZr_qVIuVevm7ulfdtCmicn3OnRFdyiO8KxrBBkkHXadvDA5K9lpMXevrx3KGzJx1nbi07LgMPOezqZWg4RVUOqU1J3hV9xIxJo4XHCw6SJSrvcO8/)
13
14At work we use a couple of custom truetype fonts. Traditionally, to get these fonts rendered on our website our graphic designer would create images and deploy them to our web server - as you could imagine this is both inflexible and expensive. Today I set off on a voyage to try and find a better solution. I have evaluated three javascript frameworks that take an appropriately licensed (truetype) font file and munges it into a javascript file that gets sent to the client that renders the font directly in the browser window (using some SVG magic). Each implementation seems to have strengths and weaknesses, including:
15
16- The size of the generated javascript file (processed from the ttf file)
17- The size of the base javascript library
18- The ease of integrating into your CSS
19- The ability to copy and paste the generated text
20- How well the font renders on different platforms (it seems that Windows handles font rendering very differently to other platforms).
21- The quality of the sample code and sample font pages (generated)
22
23Anyways, here is an example of the three different implementations:
24
25[http://www.lesmills.com.au/presentations/font_test](http://www.lesmills.com.au/presentations/font_test)
26In a nutshell:
27- **typeface.js** ([http://typeface.neocracy.org/](http://typeface.neocracy.org/)) - renders well cross-platform, largish javascript (unable to pick individual unicode characters to export), generated text can be copied
28- **fontsquirrel** (h[http://www.fontsquirrel.com/)](http://www.fontsquirrel.com/) - really polished implementation, great demo pages, however generated fonts really suck on Windows (on both IE and Firefox)
29- **cufon**** **([http://cufon.shoqolate.com/generate/](http://cufon.shoqolate.com/generate/))- renders well cross-platform, small javascript (ability to select individual unicode characters for export).
30
31Quick sidenote, it's important to keep the size of these generated libraries down (so the client isn't kept waiting while fonts load).
32
33Two strategies are used to achieve this - the first is to only include the individual characters we are going to use, this can easily reduce the file size by at least 50%.
34
35The second trick is to switch on compression for js and css within Apache (this further reduces the size of data transferred by another 50-60%). So for my use, I have decided that Cufon is the best.
36
37
38

---
title: 'Truetype Web Fonts'
date: '2012-09-12'
published_at: '2012-09-12T21:39:00.001+10:00'
tags: ['css', 'development', 'fonts', 'javascript', 'web']
author: 'Gavin Jackson'
excerpt: 'At work we use a couple of custom truetype fonts. Traditionally, to get these fonts rendered on our website our graphic designer would create images and deploy them to our web server - as you could I''m...'
updated_at: '2013-04-12T16:03:41.390+10:00'
legacy_url: 'http://www.gavinj.net/2012/09/truetype-web-fonts.html'
---

![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKipfC1TZRUSCsiukh4gqa4rHyCXVZr_qVIuVevm7ulfdtCmicn3OnRFdyiO8KxrBBkkHXadvDA5K9lpMXevrx3KGzJx1nbi07LgMPOezqZWg4RVUOqU1J3hV9xIxJo4XHCw6SJSrvcO8/)

At work we use a couple of custom truetype fonts. Traditionally, to get these fonts rendered on our website our graphic designer would create images and deploy them to our web server - as you could imagine this is both inflexible and expensive. Today I set off on a voyage to try and find a better solution. I have evaluated three javascript frameworks that take an appropriately licensed (truetype) font file and munges it into a javascript file that gets sent to the client that renders the font directly in the browser window (using some SVG magic). Each implementation seems to have strengths and weaknesses, including:

- The size of the generated javascript file (processed from the ttf file)
- The size of the base javascript library
- The ease of integrating into your CSS
- The ability to copy and paste the generated text
- How well the font renders on different platforms (it seems that Windows handles font rendering very differently to other platforms).
- The quality of the sample code and sample font pages (generated)

Anyways, here is an example of the three different implementations:

[http://www.lesmills.com.au/presentations/font_test](http://www.lesmills.com.au/presentations/font_test)
In a nutshell:
- **typeface.js** ([http://typeface.neocracy.org/](http://typeface.neocracy.org/)) - renders well cross-platform, largish javascript (unable to pick individual unicode characters to export), generated text can be copied
- **fontsquirrel** (h[http://www.fontsquirrel.com/)](http://www.fontsquirrel.com/) - really polished implementation, great demo pages, however generated fonts really suck on Windows (on both IE and Firefox)
- **cufon**** **([http://cufon.shoqolate.com/generate/](http://cufon.shoqolate.com/generate/))- renders well cross-platform, small javascript (ability to select individual unicode characters for export).

Quick sidenote, it's important to keep the size of these generated libraries down (so the client isn't kept waiting while fonts load).

Two strategies are used to achieve this - the first is to only include the individual characters we are going to use, this can easily reduce the file size by at least 50%.

The second trick is to switch on compression for js and css within Apache (this further reduces the size of data transferred by another 50-60%). So for my use, I have decided that Cufon is the best.