We’re in the midst of an online typography revolution; soon, the notion of a tiny handful of ‘web safe’ fonts will be consigned to history. Previous attempts at embedding custom web typefaces have met with failure due to usability and accessibility disasters, including the inability to select or search text. But now, CSS3 promises native custom type within the browser, and services are clamouring to assist—for a fee.

Introducing @font-face

CSS3’s @font-face feature enables you to define any font for use on a web page. Native type is used, ensuring text is accessible, searchable and translatable, and a site’s visitors don’t need to have the font installed to view it.

In theory, one can use @font-face to define a font family and the font file’s location and then add the face to relevant CSS font stacks. However, different devices and browsers support different font types, and licensing for print fonts often doesn’t extend to @font-face use. These technical and licensing hurdles mean self-hosting can be a minefield.

The dConstruct website uses relative newcomer Fontdeck for its custom fonts.

This is why designers increasingly use third-party web-font services, which ensure fonts are optimised for screen, and deal with technical issues, licensing and font upgrades. Offloading hosting and serving of web fonts might seem strange, but designers are happy to use YouTube for video and Google Maps for mapping, and so it’s more logical than it first seems.

Using web-font services

Methods and pricing for web-font services vary; generally, though, you sign up, create one or more projects, choose fonts to use on specific projects or domains (depending on the service’s terms), assign fonts to certain CSS selectors (such as h1 and p), and get code output that’s added to your website (typically, a line of JavaScript or a link element that targets a style sheet hosted on the service’s server).

Most services provide a free trial and preview functionality, but pricing subsequently varies. For example, Webtype charges from $10 (around £6.50) per year per font/font weight, and fees increase depending on site visitor numbers. By contrast, Typekit (below) tries to steer users towards a global approach: $24.99 (£16) per year nets you five fonts per site, for two websites, but $49.99 (£32) per year enables unlimited web-font usage across an unlimited number of websites -- the only restriction is 500,000 page views.

Elsewhere, Fontdeck (from $4.99 annually per font) eschews bandwidth limitations entirely, and Google offers a free, open source alternative (albeit with only 19 fonts) at the Google Font Directory. Monotype's Web Fonts service is currently in a free beta, but will start charging when it launches formally. Extensis WebINK costs from $.99 (65p) per month for a personal site, with business sites priced from $19.99 (£13).