Css3 Web Fonts

Ok I need to start with an apology, the web fonts feature is not strictly Css 3. It’s actually a Css 2 recommendation that never got implemented in any browsers apart from IE. Though with IE it wasn’t fully implemented and you had to use their standards for it to work which isn’t exactly in line with what Css is trying to achieve.

Personally I can’t believe this has not yet been implemented. I think it’s a great feature that would be widely used especially by web designers who like things to look exactly how they want too. Traditionally you have only had certain ‘web safe’ fonts that can be used on your website. These are mostly made up of standard fonts that everyone has on their machines. If you don’t have the specific font on the end user machine then the font would not be used on the website. Basically Web fonts is the ability to display any font on your website regardless of whether the end user has the font installed on their machine.

The Css selector is @font-face. Look familiar? @font-face works by first declaring the font you want to use on your website and secondly specifying a path to where the font can be found. The font can be stored on your server or it can be stored at an external location. The syntax can be seen below.

@font-face {
font-family: 'The New Font';
src: url('http://www.example.net/newfont/');
}

The big question is when will we see this implemented. Well the people behind Web kit already have it supported. (That means Safari supports it) and IE kind of supports it but only in their own way, they have said Css3 will be included in the next release of IE (which means IE8) so this could be years off yet. Opera are set to be next to include it and Mozilla (Firefox) have said it won’t be included in the first release of Firefox 3, this means it may be included in an update later in 2008. Rest assured though the feature is on its way so the future looks bright!