Results 1 to 9 of 9

Thread: @font-face not working in IE 7

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    459
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default @font-face not working in IE 7

    Hi, i have problem with @font-face. Looks perfect in other browser, except IE 7.
    Link to my website
    http://davejob.com/fontface/

    i used this website to convert my font = http://everythingfonts.com

    thanks
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    I *believe* you need to trigger hasLayout in IE7 on the elements that use the font (ref for hasLayout properties http://reference.sitepoint.com/css/haslayout )

    For the ones which don't have layout already, try adding zoom:1; to the CSS for elements using the font, and things should be OK.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    459
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    i already implement your suggestion to add zoom:1, it's still not working in IE.
    _____________________

    David Demetrius // davejob
    _____________________

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Does it help if you lay it out like this (format from my Fast-Edit website CSS);
    Code:
    @font-face {
     font-family:'MyriadProRegular';
     src:url('js/font/myriadpro-regular.eot');
     src:url('js/font/myriadpro-regular.eot?#iefix') format('embedded-opentype'),
     url('js/font/myriadpro-regular.woff') format('woff'), url('js/font/myriadpro-regular.ttf') format('truetype'),
     url('js/font/myriadpro-regular.svg#MyriadProRegular') format('svg'); 
     font-weight:normal; font-style:normal; 
    }
    
    .myFont {
    font-family:'MyriadProRegular'; font-style:normal; font-weight:normal; line-height:1; -webkit-font-smoothing:antialiased;
    }
    
    @media screen and (-webkit-min-device-pixel-ratio:0) { /* loads fonts in Chrome */
    @font-face { font-family:'MyriadProRegular'; src: url('js/font/myriadpro-regular.svg#MyriadProRegular') format('svg'); } 
    }
    And then add the .myFont class to the elements using the custom font.

    In this CSS line-height is the hasLayout trigger.

    Also, reason for the ?#iefix query string: http://stackoverflow.com/questions/8...ing-in-ie6-ie8
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    691
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there davelf,

    I do not understand why you are worrying about IE7 and a custom font.

    IE8 is the latest and final browser for Windows XP.

    Why concern yourself with those users who can't be bothered to carry out Windows updates?

    Adding a special font is only cosmetic anyway and won't be missed at all.

    "What the eye doesn't see, the heart doesn't grieve over"

    coothead

  6. #6
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    459
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    Does it help if you lay it out like this (format from my Fast-Edit website CSS);
    Code:
    @font-face {
     font-family:'MyriadProRegular';
     src:url('js/font/myriadpro-regular.eot');
     src:url('js/font/myriadpro-regular.eot?#iefix') format('embedded-opentype'),
     url('js/font/myriadpro-regular.woff') format('woff'), url('js/font/myriadpro-regular.ttf') format('truetype'),
     url('js/font/myriadpro-regular.svg#MyriadProRegular') format('svg'); 
     font-weight:normal; font-style:normal; 
    }
    
    .myFont {
    font-family:'MyriadProRegular'; font-style:normal; font-weight:normal; line-height:1; -webkit-font-smoothing:antialiased;
    }
    
    @media screen and (-webkit-min-device-pixel-ratio:0) { /* loads fonts in Chrome */
    @font-face { font-family:'MyriadProRegular'; src: url('js/font/myriadpro-regular.svg#MyriadProRegular') format('svg'); } 
    }
    And then add the .myFont class to the elements using the custom font.

    In this CSS line-height is the hasLayout trigger.

    Also, reason for the ?#iefix query string: http://stackoverflow.com/questions/8...ing-in-ie6-ie8
    Hmm, it's still not working. Beverleyh, what web font converter did you usually use? May be the problem is in the font converter i used.


    Quote Originally Posted by coothead View Post
    Hi there davelf,

    I do not understand why you are worrying about IE7 and a custom font.

    IE8 is the latest and final browser for Windows XP.

    Why concern yourself with those users who can't be bothered to carry out Windows updates?

    Adding a special font is only cosmetic anyway and won't be missed at all.

    "What the eye doesn't see, the heart doesn't grieve over"

    coothead
    @coothead, thank for your advice.
    In Indonesia most of my client still using IE.7, last time i even met a client that asking why the whole website layout really mess up, and then when i check he still using IE.6. So most developer here must make their website compatible in IE.7, how perfect is that?
    _____________________

    David Demetrius // davejob
    _____________________

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    I do it in 2 stages -

    First, I use Font2Web: http://www.font2web.com/ to get the font converted, but although the service generates a @font-face CSS sample, I've had problems with it working in Firefox.

    Second, I substitute in the CSS from my post higher up (mostly a condensed version of the CSS from IcoMoon that I use for web icon fonts: http://icomoon.io/ ), which does work in Firefox. I also added the little Chrome hack to fix the ordering of fonts and make Chrome antialiase properly.

    You can see the result and download a zipped demo from here: http://fofwebdesign.co.uk/template/_...face/demo.html

    Hope that helps
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

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

    davelf (09-11-2013)

  9. #8
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    459
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    Sorry, do you have another link? this one is not working.
    _____________________

    David Demetrius // davejob
    _____________________

  10. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Bear with it - the link is fine - the web host is having issues at the moment so keep trying until the sever comes back online..
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  11. The Following User Says Thank You to Beverleyh For This Useful Post:

    davelf (09-12-2013)

Similar Threads

  1. Resolved @font-face not supporting in firefox and IE
    By ankush in forum CSS
    Replies: 3
    Last Post: 10-26-2012, 11:52 AM
  2. Resolved @font-face not working in Firefox 5
    By james438 in forum CSS
    Replies: 4
    Last Post: 08-06-2011, 04:03 AM
  3. @font-face does not work in firefox
    By James Church in forum CSS
    Replies: 1
    Last Post: 05-25-2011, 10:07 AM
  4. @font-face in Chrome
    By traq in forum CSS
    Replies: 11
    Last Post: 05-20-2010, 07:05 PM
  5. Replies: 0
    Last Post: 10-11-2009, 03:16 AM

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
  •