-
200704 Oct
Posted in Browsers, Declarations
The latest Webkit builds now support an open implementation of the
@font-facerule, which we wrote about some time ago. Recent articles by Håkon Wium Lie had indicated that Opera might be first to market with this, but the Webkit team seem to have beaten them to it.In short,
@font-faceallows you to download fonts to the visitor’s browser, meaning you can use any licensed font to display your pages. An example of use would be:@font-face { font-family: 'The New Font'; src: url('http://www.example.net/newfont/'); }It’s a step forward for the web, and I’m delighted it’s here. Congratulations to the Webkit team, and here’s hoping that Opera push forward with their plans to implement it too. It seems like Firefox 3 won’t support this rule, so late 2008 may be the earliest we see this in Mozilla browsers.
As for Internet Explorer, they’ve actually implemented
@font-facesince version 4! However, it only works with their proprietary font format, .eot, and never took off. I wonder if they will reimplement it with Open- or True-Type fonts now.@font-faceisn’t actually new in CSS 3, it’s been around since CSS 2. However, as it’s never been properly introduced I think it’s okay to include it here!You can skip to the end and leave a response.
-
Comments
-
01.
Daniel Luz says:Comment » October 4th, 2007 at 12:33 pm
Was it dropped in later versions? I’m pretty sure it’s still working on IE7; I remember seeing a web version of Candara on a Microsoft-er blog. (Whose blog didn’t look the same anywhere else, as he didn’t set the original Candara as an alternative; better yet, Candara could be the primary font, so that those who have it don’t have to download a web-Candara.)
-
02.
Actually you’re right; it’s still supported in IE7, albeit only in the EOT format.
http://www.microsoft.com/typography/web/embedding/
I’ve amended the post accordingly.
-
03.
Fatih Hayrioğlu’nun not defteri » 04 Ekim 2007 Web’den Seçme Haberler says:Comment » October 4th, 2007 at 3:52 pm
[…] CSS3.0 ile birlikte kullanıcıya istediğimiz yazı tipini kullandırabilecekmişiz. Mozilla şimdilik desteklemiyor ancak 2008 içinde desteklemesi bekleniyormuş. Burada bir iki sorun daha var ama bu font işine kesin bir çözüm bulmak gerekiyor. sFIR bir çözüm ama daha basit bir çözüm gerekiyor. Bağlantı […]
-
04.
Great news!
Hope that Opera also implements it soon.
And than it will be a question who will release this feature first. ;) -
05.
So is this just embedding regular font files (.ttf and .otf)? If so, are there any plans to support harder to copy, maybe sub-setted font formats (SVG Glyphs perhaps)?
I ask because many higher end font licenses specifically mention embedding in webpages (meaning, it’s not allowed), and it would be nice to offer at least a hurdle that prevents these fonts from being easily pirated. Converting the font to eot, or something based on SVG, would do that nicely. It could make it at least as technically difficult as taking font glyphs (and metrics, etc.) from SVG, SWF, or PDF files.
It could become easier to convince some nervous type designers to release licenses that allow embedding in webpages, as well as gain some bandwidth performance increases by doing that.
-
06.
This is embedding regular TTF files, AFAIK. .eot has been more or less discontinued, as far as I can see; the website hasn’t been updated for four years, and the programme to convert fonts isn’t made for Windows XP. Added to this, the other browser manufacturers have shown no interest in the proprietary format, perhaps due to licensing issues.
For now, I’ll happily accept TTF & OTF.
-
07.
The big question is: who’s going to create a conditional SIFR now? :)
-
08.
This is very cool! I am glad to see support for web font faces are finally coming along!
-
09.
Hope this behavior can be disabled in browsers…
-
10.
That’s definitly gonna be a great addition!
I say lets worry about the liscences and piracy later.. There are tons of free for use fonts we really want to implement on our websites -
11.
You know what I think would be a great way to head off a lot of problems with people using fonts illegally and in un-usable ways?
DON’T IMPLEMENT @FONT-FACE IN WYSIWYG EDITORS.
That way you won’t get amateurs – and I mean that in a strictly non-demeaning sense – filling sites with ugly or unlicensed fonts. Anyone who knows about font licensing and design could still use @font-face by coding it manually, but fewer garish and illegal fonts would make it online.
-
12.
This is going to open up a potentially disastrous can of worms.
Already the possibility of a thousand different unreadable fonts is flashing through my head…
It will be a nice feature for very rare times, but majority of the time I like the fact that fonts are limited on the internet, it makes reading a whole lot easier.
-
13.
First, you’ll no doubt be able to switch this feature off. Second, I can’t imagine it getting widespread use beyond titles and headings, at least in the long term. Third, if a site is unreadable the feedback will soon let the owner know.
-
14.
Craig, I really have to respond to what you said, “This is going to open up a potentially disastrous can of worms.” I don’t understand why that kind of argument is always made. The same kinds of terrible, impossible to understand designs could be achieved using gifs, jpegs, pngs, SVG, Flash, blink tags, etc. yet no one thinks those features should be removed from browsers. Why does that argument always come up?
The simple fact of the matter is that web site owners are disincentivized to make their sites suck. Sucky sites get no love from visitors. :-)
- 15.
-
16.
Aside from the piracy issue, the major hurdle for implementation is security. Evil fonts can actually crash your system or compromise it in other ways: some font formats contain executable code.
-
17.
“Sucky sites get no love from visitors. :-)”
I agree! :P I’m very excited at this news, great post! I think as more browsers start opening up to this, we’ll see how it goes, and who knows, maybe it won’t be so bad with the licensing stuff. Or it could be a disaster like p2p and sharing music that people didn’t pay for. I don’t think it would be that hard to secure a font in a folder though (on a programming standpoint)…
-
18.
“Aside from the piracy issue, the major hurdle for implementation is security.” I’d say that was a browser maker problem, not an end-user problem.
-
19.
Great news for forgothen feature is come back. I do love to play with web font. Btw, there is no today browser that support this (except for webkit). Firefox may come but not with FF3, I don’t see it work on Alpha 8. Opera 9.5, now in development, in the latest build there is no this feature but hope some time later. IE7 not support any things about CSS3. IE teams siad some time ago they will support CSS3 in the next version, IE8, but how long it take.
Web font togther with rounded border is great and welcome. My hand on CSS will come more clean. :D
-
20.
-
21.
-
22.
Personally I’m more interested in @font-face for the purpose of providing metrics that would be useful for finding good substitutions, rather than downloading the “real font”. I think font-size-adjust is a good start toward this, but sometimes it doesn’t address anything other than x-height. Being able to specify the weight, spacing, etc of the first choice font so that substitutes can be found more intelligently would be great.
-
23.
Hi friends i have make this site using CSS but i have one small problem with font, whatever Css i have applied for the overall site is looking fine in IE but in Mozilla browser it is not supporting properlly is any body tell me what i have to do with font name and size which will support the font on all browser?
-
24.
As for weird and unreadable fonts, you can already make your page unreadable if you’d like. You can make it scroll, scream, blink and use annoying animated gifs. But those pages are not the standard and most people will know how to use a wide variety of fonts or loose visitors.
As for web fonts. You can use sIFR, but IMHO that still requires too much manual work. Preparing Flash files and a bit of specific JavaScript.
I’ve written a combination of JavaScript and PHP, that reads CSS through JavaScript and replaces text nodes with images of that text using TrueType fonts. It works on all major browsers (IE 5+/Firefox 1+/Opera 8+/Safari 3 Windows, haven’t tried Mac) and when TrueType fonts are finally available you do not need to make any adjustments to your stylesheets. It supports @font-face as well.
You do need a PHP capable webserver at the moment for the rendering of the images.
In comparison to sIFR it probably requires a bit more bandwidth, but you get to use almost all CSS text related properties. It requires no changes to your HTML code, and it does not require any manual work.
http://www.truefontfamily.com/
I posted this in the interview with Håkon Wium Lie also, but I think it is relevant here as well.
-
25.
[…] believe this is the first browser released that supports embedding TrueType fonts. (IE has been able to embed fonts for years, but you had to convert them first, which may be why […]
-
26.
.:: DiseñoLibre.ORG ::. » Fuentes tipográficas para todas las lenguas says:Comment » September 20th, 2008 at 12:47 am
[…] impulsado por Microsoft y Adobe, la alternativa de la industria a webfonts css, ya implementadas en webkit y en versiones en desarrollo de […]
-
27.
[…] sore spot for a long time, but that’s all about to change. Both Firefox 3.1 and the latest Webkit (Safari, Opera, Google Chrome) properly support CCS 3’s @font-face property, which allows the […]
-
28.
Fuentes tipográficas para todas las lenguas | miguelmonroy.com.mx says:Comment » January 6th, 2009 at 10:05 am
[…] por Microsoft y Adobe, la alternativa cerrada de la industria a webfonts css, ya implementadas en webkit y en versiones en desarrollo de […]
-
29.
-
30.
@font-face {
font-family: ‘Worstveld’;
src: url(‘http://hughuman.org/expr/fonts/WorstveldSlingBold.eot’); /* IE */
src: local(‘Worstveld’), url(‘fonts/WorstveldSlingBold.ttf’) format(“truetype”); /* non-IE */
}
HI I am using this code and its not working…can anyone help me ..?
and here
.welcomefont { font-family: “Worstveld” , sans-serif; font-weight:bold; color:#0721a5; font-size:24px; line-height:35px } -
31.
Thanks for the ideas, not sure if I’ll use them until after I experiment more. KH
-
01.
