-
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.
-
20.
If you're going to be using @font-face web fonts check out this new free tool:
EOTFAST
EOTFAST is a utility for creating natively compressed EOT files for use with any domain.
Convert once, use on any site. Savings in file size typically range from 45% to 70%.
It's fair to say that other conversions utilities like Microsoft WEFT or ttf2eot are now obsolete.
A great screen font like Droid Serif starts out at 169kb as a TTF with the full character set but as an EOTFAST file it weighs in at only 80kb. With still the full character set. Compression is lossless.
The documentation contains information for designers looking to prepare fonts for use on the web.
The download package also contains a HTML "EOT File Integrity Test" page and a helpful "fallback" test font.
EOTFAST is a must-have for anyone looking to use @font-face web fonts today. -
21.
I have tried this tutorial but when i upload the file in IE the font still no change at all the font is always not show,, can you help me
-
22.
Thanx a lot!
I tested it using a fonts folder on the server en linked the @font to that folder..
Works perfectly!!! With IE8 and Firefox.. -
23.
It works with firefox.. not with IE8.. got a little overexcited ;)
-
24.
[…] on @font-face information can be found at Qodo and at css3-info – now get ready for a deluge of eye-wateringly bad web layouts, font copyright infringement […]
-
25.
Very good post.
Now we can use much more fonts in our webdesigns.
Good tips about @Font-face here http://www.dreamincoloronline.com/css3-feature-fo…
-
26.
-
27.
I’m new to the world of @fonts. I noticed that there’s different file ends (eot, svg, ttf, woff…) what do they mean and which one (or ones) should I use to define the font on my local server? Thanks
-
28.
[…] as Verdana, Tahoma, Trebuchet MS, etc. However, I’m pretty psyched to see how well the CSS @font-face attribute is supported. Format support is somewhat of a mess: EOT for Internet Explorer and TTF/OTF […]
- 29.
-
30.
Website fonts that go beyond the basics « Blog | PRI. Web. Mobile. Print. The Works. says:Comment » August 2nd, 2012 at 9:53 pm
[…] popular web-font solutions include the CSS3’s @font-face method, Fahrner Image Replacement (FIR), and Scalable Inman Flash Replacement […]
-
31.
çok güzel bir paylaşım sunmussunuz.Bilgi paylaştıkça güzeldir başarılarınızın devamını dilerim.
-
01.
