Add to Favorites
@font-face will set us free
1
Over the past few years there has been major improvements in design quality on the web. I believe a portion of this can be attributed to the wide-spread adoption of cascading style sheets. CSS has given designers the ability to work outside the confining tabled layout. The development of CSS1 and 2 have allowed us to do such things as bring layers onto the web, set background images, and position elements to pixel precision. These things are great, but as any design school student knows typography can make or break your design. That's where the @font-face feature comes in. @font-face is not a new idea in CSS. In fact is was proposed in CSS2 and was implemented in Internet Explorer since version 5. However, IE relied on embedded open type format (.eot) which none of the other browsers adopted. With the introduction of Safari 3.1 it appears the tides may be shifting. Safari 3.1 has implemented the ability to use true type fonts (.ttf) and open type fonts (.otf) on the web. This is good news since most fonts are available in .ttf and .otf formats. I believe Safari has blazed a trail for the @font-face feature, and I hope the major browsers will follow its lead. Update: Unconfirmed reports say Firefox 3.1 and Opera 10 will support the @font-face feature. See example below.
[css]
@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
@font-face {
font-family: Delicious;
font-weight: bold;
src: url('Delicious-Bold.otf');
}
h3 { font-family: Delicious, sans-serif; }
[/css]
Comments
Leave a comment
To leave a comment, please log in / sign up
RSS Feed
Facebook
Twitter
LinkedIn
YouTube