@font-face: fonts the way you want them
Update: Please see the note at the end of this article.
A potentially useful feature of CSS3 is the @font-face rule, which allows the developer to specify a font for the page that may not already be on the client’s system. Until now, most web sites have been developed with a small list of ‘web safe’ fonts - tahoma, verdana, etc, which are native to most operating systems.
@font-face will allow the browser to download a font for rendering the page; a link is given to either a remote site or a folder on the local site which the browser will access, download, install and render, so the site can be viewed in the way the designer desired.
For example:
@font-face { font-family: 'The New Font'; src: url('http://www.example.net/newfont/'); }
Will access an external site to download the required font.
@font-face { font-family: 'The New Font'; src: local('The New Font'); }
Will access a local folder for the same font.
Obviously, @font-face will cause a slight delay in the rendering of the page, but as long as it’s not overused it will be a very welcome addition.
Note: Since writing this, I’ve found out that @font-face is actually a CSS2 recommendation, but no browser seems to have it implemented except Internet Explorer - since version 4! However, the IE implementation is only partial; it only works with their proprietary .eot file extension, and only accepts the src: url() declaration.
[tags]css3, fonts, css2, internet explorer[/tags]
Nice article Peter, once again :)
Håkon Wium Lie, Opera’s CTO actually wrote a nice article about this the other day on news.com.com. Here it is.
A good article, let down by the fact that his latest browser, Opera 9, does not support the @font-face construct!
You should mention the format specifier of src, unicode-range and panose-1 properties as these are fairly critical to the font’s behaviour. You also are not particularly clear about the local() parameter. This takes fonts from a specifc path on the user’s machine, e.g. local(/Library/Fonts/华文仿宋.ttf) is the same as url(file:/Library/Fonts/华文仿宋.ttf). I’m not sure what local(../foo) would do, as I have no idea what working directory the browser would be set to! Presumably /Applications/Safari.app/Contents/MacOS for Safari.
We spoke about it last week during Paris Web 2006 : the problem is that most of Fonts are heavily protected by intellectual laws and that the rights owners have very fast advocates…
We fall back in the DRM / Download problem…
I would hope in the future that the font problem would be taken care of all together. To bad there isn’t a way that the font could render from the servers machine. Like a cookie font or something, that when the browser closes the font would (a temp file) would arease as well to get around the laws. hmmmm I have tried the sIFR method, but it has always been buggy, and produces to much lead code in the website.
[...] slip a heavy hint that the next release of Opera (or at least an imminent release) will support the @font-face declaration, enabling us to finally break free of the limited font [...]
I dont think that’s allowed. You can’t pull a typeface off some server without having a usage license. Then again, sIFR is poppung up on so many sites and text in an image is basically the same.
*runs off to research legal issues*
[...] The distributions rights argument keeps coming up: http://www.css3.info/font-face-fonts-the-way-you-want-them/#comment-546 [...]
[...] occasionally come across an argument against the implementation of embedded web fonts in web browsers and I wanted to comment on [...]
[...] only disappointment was to see that the @font-face method of displaying web fonts was not implemented; after Håkon’s recent championing of the [...]
[...] latest Webkit builds now support the @font-face rule, which we wrote about some time ago. Recent articles by Håkon Wium Lie had indicated that Opera might be first to market [...]
[...] web typography will come not from the implementation of this module, but from the implementation of @font-face, which will facilitate the use of [...]
I thought Netscape 4.x had downloadable fonts…