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?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  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?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  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
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  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
  •