The Need for Custom Web Fonts
On the Web, fonts have traditionally been limited to those regarded as "Web safe," which in turn leads to something of a generic look to most company pages.
Fonts — that is, the style in which letters, numbers, punctuation and special characters are visually presented — have long been a way in which brands and businesses distinguish themselves in the marketplace. For example, the distinctive Coca Cola font has been nearly unchanged for over 125 years. As company websites increasingly become an important part of brand identity, it has become increasingly clear that the traditional technical limitations of Web-safe fonts have to be addressed.
Understanding Web Fonts' Technical Limitations
Computer fonts can be divided into two broad categories, bit-mapped and stroked. Bit-mapped fonts are faster when the display device has memory to memory blit-speed, such as with traditional PCs and video games, but they don't scale well. In other words, they behave in a manner exactly opposite to the Web. Stroked fonts scale well, but require that the rendering program have knowledge of the target display device. Therefore they've usually been installed on the users' computers. Since a Web developer can't know what fonts are installed, the CSS font-family property was developed.CSS Font Family Property
The CSS font-family property is basically a list, in descending order of preference, of a series of font names in which to render certain text. If the first choice is not available on the device, the browser moves on to see whether the second choice is available, etc. Broadly speaking, a browser is expected to be able to at least render three types of fonts: serif fonts, sans-serif fonts and monospace fonts. A "serif" is a a little stroke on the tips and edges of the letters and symbols. "Sans-Serif" means "without serif," so those fonts don't have the little strokes on the tips and edges. "Monospace fonts" present all letters and symbols in the same width. So, if you wanted the main fonts your Web pages to have serifs, you might put a line like this in your CSS file:.main-font {font-family: Georgia, "Times New Roman", Times, serif;} In this example, if "Georgia" is the installed font, the browser will use it when rendering the page. If it's not installed, then "Times New Roman" will be used. If that's not installed, then "Times" will be used. If none of those fonts are present, a generic serif font will be used.
Old Style Solution
The old-style solution to displaying specific fonts was to create an image file (.gif, .jpg or .png) that used attractive fonts. It might look something like this:
While visually appealing, this technique could cause pages to load slowly. Additionally, text within the graphics isn't inherently searchable. As sites become more mobile, this technique also presents scaling issues.
A Modern Solution to the Font Dilemma
When a font must already be pre-installed before it can be used, it's impossible for the design team to precisely control the look of a page. Plus, new and creative fonts aren't readily displayable. The solution, then, is for a Web page to install a custom font. Here's how to set that up. Both of the techniques described here count on one fundamental fact: A font file is essentially a standardized set of stroke instructions. By loading the stroke instructions from the server, a browser can display fonts in whatever style the designers choose.The CSS3 Solution
CSS3 introduced the @font-face rule. This allows you to specify the name of a font face and the URL of where it can be found. Different browsers support different font formats, including but not limited to: ttf, otf, eot, svg and woff. To use the @font-face complete the following steps:- Obtain, create or have created your custom font file.
- Upload your font files to your server under your Web root.
- Add code like the following to your CSS files or within the <style> tags of your HTML header:
@font-face { font-family: myFancyFont; src: url('myFancyFont.ttf'), url('myFancyFont.eot'); }
- Put the new font in your style sheet as shown in the following example:
h1 { font-family: 'myFancyFont', Times, serif; }
Problems With the @font-face Rule
The @font-face solution is still a work in progress. Older browsers don't support it, and most only support a few specific font formats. Still, the rule is supported on most modern browsers, and there are a number of font-file conversion programs available. So, you can have your custom fonts displayable on most common browsers using the rule, but it's not quite all the way there yet.A More Generalized Solution
A more generalized solution to the @font-face rule is a JavaScript font-rendering library known as cufon. The cufon system is an open-source, two-phase font delivery system that works on nearly all browsers. Unlike the @font-face rule, you don't have to wait until browser developers catch up with emerging standards. It's pretty fast, and the font look is consistent across devices and platforms. The first phase of the cufon system is font generation. You begin by uploading your standard format font file(s) into the cufon generator. You can do this online or download your own font generator for use on your own server. The font generator will create a JavaScript file that consists essentially of rendering instructions. The second phase is the rendering phase. This takes place when the browser uses the cufon rendering engine to display the generated fonts. To use the cufon font system:- Generate your JavaScript font files with the cufon generator.
- Upload the generated JavaScript font file(s) and the cufon-yui.js rendering engine to your server.
- Add code like the following to your Web page:
<!-- Include the rendering engine --> <script src="cufon-yui.js" type="text/javascript"></script>
<!-- Include the generated fonts --> <script src="myFancyFont.font.js" type="text/javascript"></script>
<!-- Render the font based on the desired tag --> <script type="text/javascript"> Cufon.replace('h1'); </script>
