Webpulp.tv

Learn how to deliver pixel perfect fonts to all browsers using selenium testing

The process of delivering custom fonts to your website maybe more complex than you thought - as Ryan Carver, Founder & Head of Technology of Typekit explains in today’s episode of Webpulp.tv.

Show Notes

Typekit is a hosted service that enables web designers to use custom fonts on their websites.

Historically web designers have been limited to a number of common fonts which were pre-installed in every machine.

Typekit’s service takes care of font file formatting, distribution, browser/system compatibility and rendering.

It also handles the licensing of fonts, providing a vast choice of custom fonts to its users.

The service uses JavaScript to do browser negotiation, font compatibility, format determination, etc.

Afterwards, specifically generated CSS files are used to serve the custom fonts in the webpages.

This multi-level integration demands for super reliability and efficiency, which Typekit ensures its customers via a worldwide CDN.

Edgecast hosts Typekit’s CDN.

Typekit’s service infrastructure is divided into two levels.

The website ‘Typekit.com’ lets users to browse fonts, configure font kits, allow API access, etc.

Whereas ‘[your-domain].typekit.com’ will host the selected fonts and collaborate with the JavaScript file.

Typekit.com has a standard Ruby stack. It currently is a Rails 3 application.

Besides MySQL, the stack also contains Redis and MongoDB.

Redis is used for stashing Resque data, Vanity metrics, etc.

MongoDB is used for storing CDN logs, basic analytics data, traffic-tracking data, etc.

Typekit uses Nginx with Unicorn for its web and application servers.

Then HAproxy is used to load-balance the whole thing.

Ryan says Typekit currently has about a dozen servers in total, hosted on Slicehost.

Typekit has a unique type of revenue-share deal with its Type foundry partners, distributing revenues based on the popularity/usage of font faces.

MongoDB is particularly used for such usage-based data collection and calculation along with its built-in MapReduce framework for reporting.

Ryan thinks on-the-fly-report-generation is technically very much possible with MapReduce.

Typekit plans to shift to an EC2 environment in near future because of the easy scaling and flexibility of EC2.

They are currently preparing a cloud formation with Chef, rebuilding Typekit’s operations infrastructure.

They wish to prepare a different and independent stack for a totally automated sub-system.

It will allow them to re-architect their 1) Font serving infrastructure, and 2) Font processing pipeline.

The pipeline usually takes care of tasks like- hinting, font-browser optimization, subsetting, format conversion, etc.

Next in line is the testing of all its fonts in an environment consisting of different platforms and browsers.

They originally had their testing system written in Selenium. Currently it is a queue-based, Python script-powered, crawler type custom system named ‘FontSpider’.

RSpec and Cucumber are used for further testing and development.

They even have a CIJOE based CI server.

For monitoring and alerting purposes, Munin and Pingdom are used.

Thanks to a CDN-based architecture, Typekit hasn’t faced too much trouble scaling-wise. CDN’s pre-generation and remote serving of files minimizes runtime hassles.

On the other hand, handling the font files has been much bigger of a challenge due to the complicated nature of such files.

Firefox’s recent release of version 4 now supports ligature and OpenType font features, making the lives of people like Ryan a lot easier.

Typekit users can also purchase additional, out-of-catalogue fonts from its foundry partners’ websites (Fontshop, ProcessType) and then integrate the license and import the fonts to their Typekit accounts.