#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    95
    Rep Power
    12

    Question @font-face in IE7 issue


    I have the following test code:
    Code:
    <html>
    <head>
    <style> 
    @font-face {
    	font-family: 'Stag-Web-Bold';
    	src: url('assets/fonts/stag-web-bold.eot');
    	src: url('assets/fonts/stag-web-bold.eot?iefix') format('eot'),
    		 url('assets/fonts/stag-web-bold.woff') format('woff'),
    		 url('assets/fonts/stag-web-bold.ttf') format('truetype'),
    		 url('assets/fonts/stag-web-bold.svg#webfontZam02nTh') format('svg');	
    }
    @font-face {
    	font-family: 'Stag-Web-Semi-Bold';
    	src: url('assets/fonts/stag-web-semi-bold.eot');
    	src: url('assets/fonts/stag-web-semi-bold.eot?iefix') format('eot'),
    		 url('assets/fonts/stag-web-semi-bold.woff') format('woff'),
    		 url('assets/fonts/stag-web-semi-bold.ttf') format('truetype'),
    		 url('assets/fonts/stag-web-semi-bold.svg#webfontZam02nTh') format('svg');	
    }
    @font-face {
    	font-family: 'Stag-Web-Book';
    	src: url('assets/fonts/stag-web-book.eot');
    	src: url('assets/fonts/stag-web-book.eot?iefix') format('eot'),
    		 url('assets/fonts/stag-web-book.woff') format('woff'),
    		 url('assets/fonts/stag-web-book.ttf') format('truetype'),
    		 url('assets/fonts/stag-web-book.svg#webfontZam02nTh') format('svg');	
    }
    .Stag-Web-Bold { font-family:Stag-Web-Bold; color:#00FF00;}
    .Stag-Web-Semi-Bold { font-family:Stag-Web-Semi-Bold; color:#CC00FF;}
    .Stag-Web-Book { font-family:Stag-Web-Book; color:#0099FF;}
    </style>
    </head>
    <body>
    <p class="Stag-Web-Bold">Stag-Web-Bold - With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</p>
    <p class="Stag-Web-Semi-Bold">Stag-Web-Semi-Bold - With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</p>
    <p class="Stag-Web-Book">Stag-Web-Book - With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.</p>
    </body>
    </html>
    My issue is that the 2nd Paragraph which uses Stag-Web-Semi-Bold does not render in that font in IE7.

    The Stag-Web-bold and Stag-web-book paragraphs render fine in IE7 - meaning I have the correct MIME types set up for @Font-face for use with IE7.

    The Stag-Web-Semi-Bold renders fine in Chrome and Firefox - meaning that the Stag-Web-Semi-Bold.eot file is not corrupted.

    I have also tried the following:
    Code:
    @font-face {
    	font-family: 'Stag-Web-Semi-Bold';
    	src: url('assets/fonts/stag-web-semi-bold.eot'); /* IE9 Compat Modes */
    	src: url('assets/fonts/stag-web-semi-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    	     url('assets/fonts/stag-web-semi-bold.woff') format('woff'), /* Modern Browsers */
    	     url('assets/fonts/stag-web-semi-bold.ttf')  format('truetype'), /* Safari, Android, iOS */
    	     url('assets/fonts/stag-web-semi-bold.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    Any ideas?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Which doctype are you using? You should always use one to tell browsers to use "standards mode".

    By the way, I recommend against using SVG fonts with @font-face. They just don't look very good.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    95
    Rep Power
    12
    I was using
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    I have a feeling there maybe corruption in the .eot file for stag-web-semi-bold.eot as the other .eot work fine and that would be the only difference

IMN logo majestic logo threadwatch logo seochat tools logo