-
200814 Aug
While browsing TechCrunch this morning, I stumbled across the site for iPhone developers tap tap tap, who had published their sales figures for iPhone apps in the first month. While these were very interesting, what’s even more interesting is the absolutely fabulous way in which these guys are using
@font-face.If you check their stylesheet, you’ll see this:
/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */ @font-face { font-family: "Fertigo"; src: url(http://www.taptaptap.com/Fertigo.otf) format("opentype"); }
Which renders into great looking text like this (at least in my Safari):
Kudos to the tap tap tap people, and if you see more of these in the wild, be sure to let us know!
You can skip to the end and leave a response.
-
Comments
-
01.
Ollie says:Comment » August 14th, 2008 at 12:01 pm
Yay! :) Let Mozilla, Opera and Macrosoft implement it and we can make better designs.
-
02.
Looks quite nice. Good to see what can be accomplished with a careful choice of font.
-
03.
Alex says:Comment » August 14th, 2008 at 1:26 pm
IE already supports @font-face, but only for their own format, hopefully they’ll support opentype for compliance.
I can’t wait until Firefox gets support, I’ve been following the bug reports for a while and they’ve made great progress (And I’m in love with Thebes and the new Text support in 3 and 3.1)
-
04.
@ Alex: Don’t expect IE to support OpenType fonts; they’re doing a big push to promote their own format as an open standard:
-
05.
Alexandre says:Comment » August 14th, 2008 at 3:57 pm
This website is really impressive. Great design, great content, no Flash. Kudos.
On the Embedded font thing, I’ve been bumping on a very interesting post in the IE blog from the IE team: http://blogs.msdn.com/ie/archive/2008/07/21/font-embedding-on-the-web.aspx
I’m not particularly a MS fan, but what they say on the subject is worth the read.
-
06.
-
07.
Opera already supported @font-face a while ago (probably before Safari), but it is currently only publicly in our ACID3 build. Expect it in (Presto) Core-2.2.
As far as I understand it, the site in this post falls fowl of the licence agreement of the font:
Using this font for a @font-face decleration is allowed, but only if a readable link to my homepage is put on every page where this font is used.
There is a link in the source, but not actually on the page itself. Unless this is only for other fonts on exljbris and not Fertigo Pro.
-
08.
Scott Meinzer says:Comment » August 15th, 2008 at 7:26 am
@ David: Fertigo Pro actually has a separate license agreement on myfonts.com:
http://www.myfonts.com/viewlicense?id=706You may use this font for Font-Face embedding, but only if you put a link to http://www.exljbris.nl on your page and/or put this notice /* A font by Jos Buivenga (exljbris) -> http://www.exljbris.nl */ in your CSS file as near as possible to the piece of code that declares the Font-Face embedding of this font.
-
09.
-
10.
Jerome says:Comment » August 15th, 2008 at 8:15 pm
Alex, Peter… OpenType (OTF) IS the MS format. TrueType is Adobe/Apple.
What they plan to do is only support EOT… which is a format that lets you subset OTF and make it URL dependent… like a personal DRM.Their reason for only supporting the EOT is that they say it’s the only way font foundries will become comfortable with including your right to use their fonts in your internet application in a way that you can host the file. (Because right now most font TOC prevent you from putting the file on a server and linking to it… even the freeware ones from Larabie)
-
11.
@ Jerome: Yes, I know that; I should have made clearer that what I meant was not to expect IE to support un-embedded OT fonts (as Apple and Mozilla are doing), for exactly the reason you say; you can read more about it in the link I posted.
BTW, OT isn’t just the MS format now; it’s an ISO standard.
-
12.
Alex says:Comment » August 17th, 2008 at 2:18 pm
OpenType is the MS/Adobe format, TrueType is the Apple format.
EOT isn’t ever going to work as an effective means of DRM (since both WebKit and Firefox are open source, anybody could write a patch to dump the files to disk, you can even do the same by hooking IE)
Personally I think IE only supporting EOT is silly, it will do nothing to stop people stealing the fonts, and just stops people from using fonts they create themselves, or open fonts in a different format.
-
13.
Wow, I never knew that Safari supported the @font-face. I can’t wait to start using it in some of the things I design for the web!
Microsoft is retarded. Everyone knows that OpenType is the new standard. It is the preferred font in printing because of it’s ability to go cross-platform.
The only problem is how do you deter other people from downloading the font who do not have the proper licenses? Make some sort of script that disallows direct linking? I’m stumped on that one.
Good post, good site! I saw this site (tap tap tap) on Web Designer Wall.
-
14.
@ Alison, I suppose one way you could stop people from downloading the font is put the font in a folder and put a .htaccess file against it.. with username and password access
-
15.
Michael: wouldn’t that also prevent the web font to work, as the CSS wouldn’t be allowed to access it either?
-
16.
Exec says:Comment » August 22nd, 2008 at 11:11 pm
I think he’s being sarcastic.
The only way to stop someone from getting the font is to not put it there in the first place.I think Alison was talking about hot-linking? That can be stopped the same way you stop hot-linking of images.
-
17.
No I was talking more like stealing the font and using it in your designs without paying for it.
Well if you have a username and password for accessing it then perhaps you could make a script to access it via username and password within the php file. Like a database connection file?
Oh! well what if you did that. Put the font in a database with restricted access? Or would that just be too slow to load?
-
18.
Exec says:Comment » August 26th, 2008 at 7:53 am
It’s the client that needs the font file, not the server. It has to download the font file to be able to use it.
-
19.
The reason why MSIE only want EOT is because the browser still has to download the font in its cache/temporary directory for it to render the font on the user’s end. Making your URL to be the only to use it will be useless.
That is where EOT comes in. It allows foundries and site authors to specify which URLs the font will be usable. So even if it resides in your cache/temporary dir, the font will be unsusable because the URL it requires is not the one accessing the font (but instead your application or own sitet).
At least that’s what I understood, I may be wrong.
-
20.
Alex says:Comment » August 28th, 2008 at 7:32 am
That’s the idea, but it’s up to the browser to implement that check. And to support it, Firefox and Safari would need code to read in an EOT file and output a plain OpenType file, say bye-bye to any restrictions in the EOT file.
-
21.
Yah. Personally, I do not think EOT is a good choice for the spread of ‘Web Fonts’ (as W3C refers to it). I even see it as the anti-thesis of Web Fonts and standards.
-
22.
So instead of creating images, we can now just import fonts from folders in our server?
-
23.
@font-face is Not suitable for CJK language. Because CJK font always too big. download it is a nightmare for visitor.
-
24.
@Robin: There’s a way to minimize the download, add this to your @font-face
unicode-range: U+1700-171F;That’s what I understood from the manuals and what not about that bit. It will allow the browser to download only the specified unicode-range, this way the end-user doesn’t have to download the whole font.
But then, on second thought, CJK, or just the Chinese glyphs alone is in itself huge even without the non-CJK ranges. I guess in that case, the end-user should get his/her own copy of the font(s).
——————————
Anyway, here’s an online sample of @font-face using the Filipino Baybayin writing script -> http://laibcoms.asia/blog/xindao/general3/baybayin-typepad-fil-tglgUse FF3.5 and Opera 10. I haven’t checked WebKit-browsers yet. IE on the other hand won’t work (ever, because they only want .EOT).
Fonts I used are downloadable free-of-charge ;)
-
25.
is it just me or is this going to lead to some absolute web disasters?!?!?
-
26.
Hello,
I’ve tried to use this font but it doesn’t display it (at least in firefox), any idea would be great !!
Exemple de police web
/* A font by Jos Buivenga (exljbris) -> http://www.exljbris.nl */
@font-face {
font-family: “Fertigo”;
src: url(http://www.taptaptap.com/Fertigo.otf)
format(“opentype”);
}body {
font-family: “Fertigo”, serif;
font-size:40px;
}Ce texte utilise Fertigo.
-
01.
