Design Challenges

Embed fonts on your Web site

Recently, I have been thinking about design and the nature to code safely on the Web. As designers we typically choose to use Web friendly fonts like Verdana, Times New Roman, Arial, and Trebuchet MS.

Designers, however should not let browsers inabilities to carry a vast array of fonts interfere with their designs. Michaelangelo would not have sacrifice the roof of the Sistine Chapel due to lack of a smaller brush, so why is it that Web designers so often sacrifice bandwidth and turn to background images or heavy downloads to convey their message; not to mention the lack of search engine friendliness involved in presenting picures and images instead of text.

I sought out a clear answer on how to embed fonts on a site without the need to sacrife speed or SEO. Back in the late 90's both Netscape and Internet Explorer were fighting grounds for the title of browser reign supreme as such both came out with unusual plugins and font rendering programs, however this was but a mere patch and band aid on the problem as fonts were translated to images solving only the small side of the equation. I don't blame them as SEO wasn't a hot topic in those days and Google was but a silly word some guys thought of to represent their brand.

In today's Web, where Search Engines are the hot club were your name must be on the list, it is crucial to create SE's friendly sites. to do so, the @font-face construct must be utilize.

Here is a simple example courtesy of the css czars at A List Apart:

@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

"Those familiar with CSS syntax will recognize the last line. The @font-face construct may not be familiar, however it’s easy to explain: as the “Kimberley” font is requested, the font file is fetched from the specified URL. The syntax is described in the CSS2 specification.

To avoid long lists of @font-face declarations in the style sheet, they can be hidden using @import" like so,

@import url(http://www.princexml.com/fonts/larabie/index.css) all;
h1 { font-family: Goodfish, serif }

The bottom line is that you should not limit yourself or set the bar too low, there is always a way to solve the problem. Problems are easy to come by, but securing an answer is where the intellectual matter comes into play. Don't let the ineptitude of todays' browser interfere with the future, just make sure that you gracefully prepare your site for degredation or for those living in the past. To appreciate the true power behind css, please refer to the Zen Garden project.

Labels: brand, cms, CSS, Design, dreamweaver, Features, jagged images, photo resizing, Search Engine, SEO