-
200621 Jun
Posted in Declarations, Modules, Tutorials
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]
You can skip to the end and leave a response.
-
Comments
-
01.
Nice article Peter, once again :)
-
02.
Håkon Wium Lie, Opera’s CTO actually wrote a nice article about this the other day on news.com.com. Here it is.
-
03.
A good article, let down by the fact that his latest browser, Opera 9, does not support the @font-face construct!
-
04.
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.
-
05.
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…
-
06.
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.
-
07.
[...] 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 [...]
-
08.
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*
-
09.
unFocus Projects » Embedible web fonts and the rights counter argument says:Comment » August 8th, 2007 at 8:14 pm
[...] The distributions rights argument keeps coming up: http://www.css3.info/font-face-fonts-the-way-you-want-them/#comment-546 [...]
-
10.
[...] occasionally come across an argument against the implementation of embedded web fonts in web browsers and I wanted to comment on [...]
-
11.
[...] 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 [...]
-
12.
[...] 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 [...]
-
13.
[...] web typography will come not from the implementation of this module, but from the implementation of @font-face, which will facilitate the use of [...]
-
14.
-
15.
-
16.
Hi, only safari is downloading the font but it is not downloading for IE, Mozilla and opera. I want this for all browsers.
Kindly, help me to resolve this.Thanks,
-
17.
@Vineet Kaushik
(sorry this reply is stupidly late, but for the benefit of Googlers…)
The latest version of Opera supports this, I believe an alpha/beta build of Mozilla also does. It should work in IE as they invented it, but I believe IE has some problems with ttf fonts. -
18.
Yeah I tried it on IE8 and Chrome 1.0.154.65.
It doesn’t work!
Any suggestions will be much appreciated!
Norbert
-
19.
Firefox 3.5 and Safari 4 support it well. Firefox 3.5 doesn’t support it for small-caps though, so watch out for that.
-
01.
TAG CLOUD
acid3
advanced layout
advanced layout module
background
border
Browsers
color
css
CSS3.info
CSS WG
csswg
developer tools
disabled
enabled
Feedback
firefox
firefox 3.1
flexible box layout
fonts
generated content
grid positioning
HSLA
HTML5
ie6
ie7
jina bolton
jquery
media player
Multicolumn Layout
News
Opera
Opera Dragonfly
presentations
RGBA
safari
Selectors
slides
SVG
text rendering
W3C
wasp
Web Fonts
webkit
windows
Hosting by:
Leave a Comment