@font-face in Chrome

[traq]

Hi all, I'm trying to get @font-face to work in Google Chrome. According to this (http://googlechromereleases.blogspot.com/2010/01/stable-channel-update_25.html), Chrome supports .ttf fonts. I've got version 4.1.249.1064, but the font doesn't show up. I decided to try including a .svg version of the font -which was the solution for Chrome before- but it still doesn't fly.

css:
@font-face {
font-family: batik;
src: url("batik.eot");
src: url("batik.svg#BatikRegular") format("svg");
src: local("Batik Regular"), url("batik.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}pic (supposed to be a menu in there):
http://www.custom-anything.com/sand/chromefontface1.jpg

Any ideas?

[traq]

okay, some more confusion. I've found sites that use @font-face and display correctly in Chrome. Also, I've found that I can highlight the text in my @font-face and it's there, rendered correctly, but not being displayed. If I remove the @font-face family declaration, the generic font-family (monospace) shows just fine.
http://www.custom-anything.com/sand/chromefontface2.jpg
http://www.custom-anything.com/sand/chromefontface3.jpg
Obviously, I'm doing something wrong here. If anyone knows what please let me know... :)

[Snookerman]

I can't get it to work in 5 beta, have you found any sites that have truetype fonts that work in Chrome?

[traq]

yeah, http://www.zenelements.com/blog/css3-embed-font-face/ works fine.

@font-face {font-family: SketchRockwell; src: url('http://www.zenelements.com/blog/images/tutorials/web/css3-introduction/SketchRockwell.ttf');}

[Snookerman]

Try downloading that page, strip down everything except the text with the @font-face rule and then switch to your font. Do you have this on a server?

[traq]

umm... This particular page is local. I do have this page (http://www.custom-anything.com/fontface.html) online, and using the same font, but I haven't tried it in Chrome (I'm not at my computer now).

[Snookerman]

That one works in my Chrome, both online and locally.
3316

[traq]

when I get home today I'll do some more troubleshooting, and I'll try my "problem page" live. thanks, Eddy!

[traq]

http://www.custom-anything.com/sand/custom/home.php <--this is the page in question.

I've figured out that @font-face is working in this page. However, in Chrome, the text-shadow property is interfering with it. If I remove the text-shadow property, the @font-face definition works (and vice-versa). Anyone know a workaround - besides removing the shadow? I kinda like it.

[traq]

things are getting weirder...

http://www.custom-anything.com/sand/g-vs-fx.jpg

Eddy, have you looked at my live page? Is it working for you?

Anyone else?

I'm thinking I'll try reinstalling Chrome. Maybe I got a bad .zip


hmm... whatever this problem is, it seems to be limited to the particular font I'm trying to use. batik = fine. text-shadow = fine. batik + text-shadow = BAD.

However, 'IM Fell DW Pica' (@font-face hosted by google) + text-shadow = fine.

For now, I'm just going to switch fonts. If anyone finds a solution, however, I'd still love to hear it. Thanks!

[Snookerman]

Hmm.. I just tried it in Chrome and my computer froze..

[traq]

! :confused: