@font-face in Chrome

[traq]

Hi all, I'm trying to get @font-face to work in Google Chrome. According to this, 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):


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.


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 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.
Attachment 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...



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

Edit:

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!