Adding Custom Fonts to Your Web Pages

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.

Web FontsFonts — 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:

Fancy Font Image

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>

The cufon system supports  various framework libraries such as jQuery, so you could use the cufon object to apply your fonts using the jQuery selector syntax.

Conclusion

By delivering font files to your users’ browsers, either with the @font-face rule or with the cufon JavaScript font system, you’re no longer limited to having your Web pages display only fonts that the users have installed on their devices. Furthermore, you’re now free to create text as text, rather than graphics, when you would like to use special fonts on your websites.

Comments

  1. I love @font-face for embedding pretty fonts! Font Squirrel has a great tool for creating your own @font-face kits as well as a nice collection of commercially liscenced fonts.

    I would like to add a bit about hosted @font-face providers like Type Kit and Google Fonts. These services give you access to even more fonts and don’t require you to have them saved in the root of your site. Obviously, a hosted solution has limitations. Type Kit is a paid service so you’re limited to the number of allowed fonts for your subscription plan. Google Fonts probably has a pretty good uptime record but it could still go down.

  2. BY David E Brumbaugh says:

    Thanks Michelle,

    You make a good point about the @font-face providers. I personally try to keep everything I need on web servers under my own control, and avoid paying for things if I don’t need to.

    However, that’s my preference, and not “the way it has to be”. Thanks for the additional info!

  3. I think all web developers prefer to have more control over less. I do webmastering work for a lot of sites, sometimes for sites I didn’t develop. It drives me crazy not to have total control over all the moving parts, you?

    Did you happen to see the CSS Zen Garden has been reopened for new submissions? Dave Shea recommends using Google’s Font library for projects since he won’t be hosting hundreds of custom fonts on the Zen Garden site. I can’t believe it’s already been 10 years since it opened. I’ve been developing sites for almost 9 and never got around to submitting anything. Maybe I’ll finally get to it this time around but before the site’s 20th anniversary.

  4. BY David E Brumbaugh says:

    I hand not seen that about CSS Zen Garden.

    I spend more time on web applications, than public sites, so I usually have to have control. I know that when you use Google Fonts, for example, it’s an active invitation for Google Bot to come visit your site and index it.

    That’s a “good thing”, when you want your site indexed, but it’s a “bad thing” when your site is behind a user/name password log in. It wasn’t google bot, but I did have a a crawler set of the IDS in one of my web apps. I ended up reporting them to their IPS evidently got them in trouble, but it seems they were innocently just crawling following links back to their source.

    Since then I’ve very careful about the apps linking to resources on other sites and servers. One of the articles I’m thinking about writing is the difference between “Web Sites” and “Web Apps”.

  5. I think it would be great for you to write up the difference between web apps and websites.

    Have you worked with Google’s Cloud services or their Dart language? I have only logged in and created test apps with Google’s cloud compute, I would like to learn how to use the platform for web apps without reading through all the documentation. Documentation is for when you’re stuck, am I right?

Post a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>