Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: @font-face in Chrome

  1. #1
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default @font-face in Chrome

    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:
    Code:
    @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?

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

  3. #3
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

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

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

  5. #5
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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?

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

  7. #7
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

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

  8. The Following User Says Thank You to Snookerman For This Useful Post:

    traq (05-19-2010)

  9. #8
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

  10. #9
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.

  11. #10
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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!

    Last edited by traq; 05-20-2010 at 05:05 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •