If you run a site on a Linux Web server, you may be spreading some proprietary software where you least expect it: in your site’s fonts. Worse still, you’re unnecessarily limiting your design to a pretty restrictive set of typefaces that are only widespread because everybody else uses them. Luckily it’s a simple problem to fix. This weekend, you can wave goodbye to bland choices like Helvetica and show off some quality open source fonts all in one move.
Don’t believe it? Try this simple experiment. Bring up the default page’s CSS stylesheet (if you are working remotely, use View Source in your browser, then find the <link> tag with the rel=”stylesheet” attribute). Then look for the font-family: property — odds are you’ll find several of the “Web-safe fonts” specified: Arial, Courier, Verdana, Georgia, Tahoma, Trebuchet, etc. These faces are common on Windows and Apple platforms, specifically because the companies have a license agreement to pre-install them. Linux users don’t have them pre-installed, though, and the licenses are proprietary and very restrictive.
You can’t count on everyone to have open fonts like Liberation and Deja Vu pre-installed, so simply specifying font-family:Liberation won’t do the trick. But all the current Web browsers support linking font files inside HTML just like images or other page content. To do so you first name the font with an @font-face CSS definition, such as:
@font-face {
font-family: MysiteBodyCopy;
src: url( /media/fonts/bodycopy.ttf ) format("truetype");}
Then wherever you need to specify the font’s usage, you reference it in a CSS rule just like you would one of the Web-safe fonts, e.g. p.body { font-family: MysiteBodyCopy, Helvetica, Arial, sans-serif; }. The only wrinkle is that the browser must be able to fetch the bodycopy.ttf font file from your server, since we don’t count on the reader’s system already having it installed.
Getting Started: External Hosting
You can certainly host the TrueType or OpenType files from an open font on your own Web server, but if you’re just dipping your toe in the water you can also try out one of several publicly-accessible open Web font services. The most well-known at the moment is the Google Font Directory, which serves up nearly 100 fonts licensed under either the SIL Open Font License or Apache License. Unlike the proprietary services from commercial type foundries, you do not need to pay to use the service or request and API key to access it.
The Google Font Directory wraps a lightweight API around its font service, somewhat simplifying what you need to do to incorporate the fonts in your page. Instead of the @font-face definition step described above, you only need to like to the Directory’s stylesheet as pass it the name of the font you wish to use. The link format is <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=TheNameOfTheFontYouWant"> … so, family=Cantarell or family=Gruppo.
If you need to use multiple fonts from the library, you can consolidate them in one reference with the pipe character: family=Bentham|Arimo|Kristi. If the font name contains a space, substitute a plus-sign in the API call: family=Droid+Serif. Some of the fonts have variants at different weights and styles, which you can request by appending them with a colon: family=Anonymous+Pro:italic,bolditalic.
With your API request in place, simply reference the font family in your CSS rule as before. For example, h4 { font-family: Inconsolata; } in a stylesheet, or <div style="Inconsolata"> as an inline style.
CMS and Web Framework Support
“That’s straightforward enough if you build all of your pages by hand,” you might say, “but this is the 21st Century — who does that?” Well, you’re in luck. A growing number of open source content management systems and app frameworks are adding support for the service.
WordPress has several Google Font Directory plugins available. The most popular at present seems to be WP Google Fonts. When installed, the plugin allows you to assign fonts from the Directory to you site’s CSS rules — regardless of which theme you use — through a simple checkbox interface in the Admin panel. If for some reason you don’t find this plugin to your liking, there are others. For example, Jeff Sebring’s Google Web Fonts plugin incorporates much the same functionality with a different interface, adding a tab to the Appearance panel.
The Drupal CMS also has several options. The Google Font module supports just the Google Font Directory, whereas the Google Webfont Loader API module merges support for the Google service, the commercial alternative Typekit, and self-hosting your own fonts, all into a unified design tool. Last but certainly not least, the jovially-named @font-your-face module offers support for Web fonts hosted on any server, Google’s or otherwise.
Joomla site administrators have two options as well. The HD-Gfonts extension is the simple, Google Font Directory-only alternative. The Phoca Font system consists of two parts: the Plugin and the Component. Together they add support for the Google Font Directory as well as other Web font sources or locally hosted fonts.
A Google Font Directory extension exists for the open source TYPO3 blogging platform as well. Called the Google Web Font Loader, it incorporates Google’s JavaScript-based WebFont Loader library, which gives you slightly more control than the raw API by allowing substitutions and showing text in an interim font while the remotely-hosted Web font loads.
At the moment those are the only Web application packages with support for the Google Font Directory or other Web font hosting systems — at least that I have been able to discover. If you know of one, please leave a comment. Hopefully other text-heavy applications (such as discussion forums and wiki software) are soon to follow; these sites involve a lot of reading for site visitors so it would be nice to treat them to better fonts.
At the framework level, there are also the beginnings of support. Ruby on Rails developers can turn to Jon Canady’s Google Font Rails Helper, but at this level using the API directly is hardly any more work.
Applications
The above plugins and modules make short work of connecting to Web fonts on a live site, but while you are developing you may need to test with a different set of tools. The Google Font Directory has a preview tool with which you type in sample test and render it live in the browser in any supported font, complete with CSS. But that window of text won’t help you choose a font for your own site.
Firefox users can preview any site in a Google Font Directory font with the Webfonts Previewer add-on. This is classified as an “experimental” add-on, so you will need to enable experimental add-on support to install it.
Chrome users can install the similar Google Font Previewer for Chrome extension. This extension, unlike the Firefox add-on, applies the selected font to the entire page, but on the other hand it does offer more control over font size, style, and weight.
Safari users are not left out entirely either: Julio Di Nicola’s Google Fonts in Safari extension creates a toolbar that allows to you to click and apply any of the Google Font Directory fonts to a site.
There is one open source Web design app with explicit support for building pages using the Google Font Directory: BlueGriffon. BlueGriffon is an XUL application (so it uses Mozilla code under the hood). As a result, its support for this Web font functionality is provided through a Firefox-like XPI add-on.
Extra Credit: Other Collections and Special Tools
We’ve discussed the Google Font Directory primarily because it is one of the largest collections of open fonts on the Web, and because it provides a straightforward API, but it is by no means the only alternative. The Open Font Library, for example, focuses on font development and collaboration, but you can use any of its fonts as an @font-face -linked Web font as well.
There are a few alternate approaches to Web fonts that you may wish to explore, such as Typeface.js, a JavaScript library that loads Web-hosted fonts. This approach enables you to support Web fonts on older browsers (or browsers restricted in other ways) that do not support CSS font linking.
Type Select is a more robust framework built around Typeface.js, but using jQuery. If you want to go really far out, Cufon is a Web-based tool that converts TrueType and OpenType fonts on-the-fly into the little-known W3C Vector Markup Language (VML), and serves them up to the browser using JSON. Why on Earth would you ever need to go to that trouble? If you’re a Web developer, you can probably guess in one try: to shoehorn in support for Internet Explorer. But let’s not think about that too long — it is the weekend, after all.
