Web Embedded Fonts

Web Embedded Fonts

It's important to carefully consider web embedded fonts before implementing them on your web page. There are a few reasons it can be useful and beautiful, but many experts in the web design community feel that they should be avoided.

The Pros of Web Embedded Fonts

Web embedded fonts are a designer's dream come true. Instead of relying on only a few of the "standard" serif or sans serif web fonts, such as Arial, Helvetica, Times New Roman, Georgia, and the like, designers can choose the most esoteric fonts that they want for their web pages, such as graphite true type font or hulkamania font. The possibilities are limited only by your imagination.

Normally, the use of specialized fonts required the creation of images, such as for banners and logos. This limited the overall use of special fonts, because no one likes to adversely increase the size of their web pages with so many images that could easily be replaced with text. With the use of web embedded fonts using CSS, rather than using images, the fonts can be "True-Type" (a standard format that is clearly rendered by computers). This is why, today, you can now download so many free specialized fonts, such as free wedding text font, free Dr. Seuss font, or even free childrens fonts.

Using these special fonts, in the words of the popular web design column A List Apart, "can improve aesthetics and increase visual variety on the web." But not everyone is happy about this potential.

The Cons: Copyright and Ugliness

Some feel that the arbitrary use of embedded fonts will violate copyrights, because part of the process is that users download the actual font to their computer. This means that they have access to a font that they did not pay for, and are not licensed to use. This has professional typographers understandably upset.

However, there are several notable professional typographers, such as Ray Larabie who grant open license to hundreds of high-quality True Type fonts for use on the web. Add this to the many free fonts that are available, like free wedding text fonts or free childrens fonts, and the options are many. The only remaining precaution a designer should follow is aesthetics.

Aesthetics can be a big concern, though. In the early days of the web, the use of the blink tag and rotating 3-d flaming logos created a whole genre of websites known as "Websites That Suck." Many professional designers feel that web embedded fonts will return the Internet to those early days, with glitter fonts and other unusual typefaces littering the webscape. It is enough of a concern that some web travelers make use of browsers that can easily turn off stylesheets (such as Firefox, using the View - Page Style - No Style selection).

There are a few additional, more technical, reasons to avoid using embedding fonts rather than the ten or so "standard" fonts. One is that it presents a vulnerability to viruses, such as a vulnerability that experts discovered a version of MicroSoft's Internet Explorer. While that particular vulnerability is now fixed, embedded fonts remain potential target for further malware attacks.

The other reason embedded fonts should probably be avoided is that it doesn't yet work on every browser. While it is a part of the CSS2 spec, the W3C is still ironing out the details, and even when that happens not all the browsers are going to adopt that standard. It's important, and it'll take more work, to ensure that if your selected special font doesn't show up as you like on the page, that it will degrade "gracefully" - that is, into a font that still renders your content easy to read.

How to Do It

There are many different places on the web to learn how to include embedded fonts in your CSS stylesheets. A List Apart offers a tutorial with code examples, as does SSI Developer.

It is not as simple as just picking out a font. The typeface needs to be converted into a file that CSS can translate, which is either a portable font resource (.pfr) or embeddable open type (.eot is used only for Explorer 4.0 on Windows). Once font designers created and stored these files on the web, you use a CSS construct known as a font-face to call for the font that you want in your page, using the typical property tags to control size, spacing, color, etc.

While using web embedded fonts is rather straightforward, it may not be worth the effort for many sites, simply due to the lack of compatibility in many browsers. However, one thing cannot be denied: web designers certainly have yet another brush available on their palette to make beautiful pages on the internet.

Web Embedded Fonts