The New Face of Fonts on the Web
Friday, 5th December 2008
Support for fonts on the web has been a sore spot for a long time, but that’s all about to change with both Firefox 3.1 and the latest Webkit (Safari, Opera, Google Chrome) properly support CCS 3′s @font-face property. Now browsers will be able to automatically download fonts from an online location.
Here’s a simple example:
@font-face {
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt")
}
H1 { font-family: "Robson Celtic", serif }
This is very exciting news. No longer will typographically savvy developers need to rely on clever sIFR hacks. Oh, and not to make Internet Explorer an afterthought, but IE has supported @font-face since version 4, except with a proprietary .EOT filetype, a compressed form of OpenType, while Firefox and Webkit are supporting the more common and non-proprietary TrueType and OpenType formats.
I’ll bet font-makers are terrified about this, because I assume it also leaves the font out in the open for anyone with basic web knowledge to download and use. Still pretty cool though.
Opera is not based on WebKit. Check wikipedia if you don’t believe me. Fortunately their latest alpha does support @font-face.
Andrew, you’re right. I had meant to mention Opera separately from Safari and Chrome. Opera 10 alpha supports @font-face in the same way that Firefox, Safari and Chrome do.