SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    @font-face problem

    Hi I am having problems with @font-face working in firefox and chrome

    Code:
    @font-face {
    	font-family: '3DumbRegular';
    	src: url('3Dumb.eot');
    	src: local('3Dumb Regular'), local('3dumb'), url('3Dumb.ttf') format('truetype');
    }
    this works in IE8 Win7.

    Code:
    @font-face {
      font-family:'UniversityRomanStd';
      src: url('UniversityRomanStd.ttf');
     }
    Works on local machine chrome/firefox but when site is live it doesn't work.

    Any Ideas/suggestions???

    Kind regards

    Damien Harrison

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    @font-face isn't used in all browsers. Microsoft implemented a restricted (EOT) version in IE5, Safari 3.1 revived it, and FF 3.1 and higher also uses it. Opera 10 implemented it, but admitted to screwing it up. Chrome doesn't use it, so you won't see it in that browser. Overall, you can't rely on it to display in a wide range of browsers and browser versions.

    Someone with more current info please update and correct this...!

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    From what I understand, @font-face should be fairly reliable.

    Here are some handy sites:

    This site has a nice list of available fonts, with download kits that work cross-browser:
    http://www.fontsquirrel.com/fontface

    Also check out
    http://paulirish.com/2009/bulletproo...tation-syntax/
    http://www.fontsquirrel.com/fontface/generator
    http://www.zeldman.com/2009/12/02/bu...oof-font-face/

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    @font-face isn't used in all browsers. Microsoft implemented a restricted (EOT) version in IE5, Safari 3.1 revived it, and FF 3.1 and higher also uses it. Opera 10 implemented it, but admitted to screwing it up. Chrome doesn't use it, so you won't see it in that browser. Overall, you can't rely on it to display in a wide range of browsers and browser versions.

    Someone with more current info please update and correct this...!
    There's a workaround for the bug in Opera: defining bolds and italics as different font families, and applying them explicitly on the elements you want to use them for.

    dev opera page
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All browsers are displaying the font on the local machine.

    When uploaded to live site on IE8 displays the font.

    www.damienharrison.co.uk

  6. #6
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    you have error in your code. there are extra quotes

    Code:
    <div id="headerContent" class=""clearfix">
    vineet

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Are you sure the path to your fonts is right? Are they located in the same directory as the stylesheet?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    As Ralph said make sure the path is correct or try an absolute path to the file.

    We had a thread here that may be of interest also.

  9. #9
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thanks for you help so far.

    I removed the double quotes.

    Tried adding absolute route.

    Files are all in the same folder (kept it this way on purpose as couldn't get it working with multiple directories and will sort out the structure when working as needed)

    Fonts still not working in Chrome or firefox.

    Cheers so far =0)

  10. #10
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right even stranger now I have one font working in IE 3Dumb.eot and one font working in FF/Chrome Diavlo_LIGHT_II_37.ttf

    CSS Below

    Code:
    body
    {
    	margin:0;
    	font-family:Arial, Helvetica, sans-serif;
    	background:white url('images2010/bg.png') repeat-x;
    	text-align:center;
    }
    
    
    @font-face {
      font-family:'DiavloLIGHT';
      src: url('http://www.damienharrison.co.uk/Diavlo_LIGHT_II_37.eot');
      src: local('DiavloLIGHTII37'), local('DiavloLIGHTII37'), url('http://www.damienharrison.co.uk/Diavlo_LIGHT_II_37.ttf') format('truetype');
    
           }
          
    
    
    @font-face {
    	font-family: '3DumbRegular';
    	src: url('http://www.damienharrison.co.uk/3Dumb.eot');
    	src: local('3Dumb Regular'), local('3dumb'), url('http://www.damienharrison.co.uk/3Dumb.ttf') format('truetype');
    }
    
    
    
    header, section, footer,
    aside, nav, article, figure {
    	display: block;
    	text-align:justify;
    }
    
    
    
    header
    {
    	background-color:#2f3241;
    	border-bottom:2px gray solid;
    	width:100&#37;;
    	min-height:75px;
    	padding-top:25px;
    	}
    
    
    div#headerContent {  margin:auto; 	width:90%;
     }
    
    div.logo
    {
    	
    	float:left;
    	margin-left:10px;
    	margin-right:20px;
    	margin-top:-20px;
    }
    
     .logo h1{
        
        color: #fc0079; 
       
        font-weight:normal;
        font-size:52px;
        margin:0;
         font-family:3DumbRegular;  /*text-transform:lowercase;*/
       }
          
          .logo p
          {
         
          }    
          
          .logo span.url
          {
    	letter-spacing:5px;
    	padding-left:0px;
    	color:#ffffff;
    	font-family:DiavloLIGHT;
    
    }
    
    
    /* navigation --------------------------------------------------- */
        nav {
    	padding: 7px 0 7px 0px;	height: 75px;
    	display:inline;
    	line-height:75px;
    	float:right;}
        		
        		
          nav ul {	
    			margin:0; 
    			padding:0; 
    			list-style:none;
    			}
          			
          	nav ul li {float:left; display:inline; margin:0; padding:0;}
          	
          	nav ul li a {
          	font-family:Arial, Helvetica, sans-serif;
    	      	  font-size: 19px;
    	      	  font-weight: bolder;
    	          display: block; 
    	          color: #fff;
    	          text-decoration: none;
    	          float: left; /*\*/ float:none; 
    	          padding: 7px 25px 7px 7px;
    	          line-height: 13px;
    	          border:0;
            }
            
            nav ul li a span {
    	      	  font-size: 11px;
    	      	  font-weight: normal;
    	      	  color: #67707a;
            }
            
            nav ul li a:hover {
              	   color: #fc0079;
            }
          	nav ul li#active a {
            }
    
    
    /* content ----------------------------------------------- */
    
    h1,h2 
    {
    	font-family:3DumbRegular;
    	font-size:30px;
    	margin:0px;
    	font-weight:normal;
    }
    
    h1 {
    	font-size:35px;
    	
    }
    section#contentContainer
    {
    	width:1024px;
    	margin:auto;
    	margin-top:25px;
    }
    
    section#portfolioContainer
    {
    	width:600px;
    	margin:auto;
    }

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Are these correct?

    Code:
    .logo h1 {
        color: #fc0079;
        font-weight:normal;
        font-size:52px;
        margin:0;
        font-family:3DumbRegular;  /*text-transform:lowercase;*/
    }
    h1, h2 {
        font-family:3DumbRegular;
        font-size:30px;
        margin:0px;
        font-weight:normal;
    }
    Shouldn't they be:
    Code:
    .logo h1 {
        color: #fc0079;
        font-weight:normal;
        font-size:52px;
        margin:0;
        font-family:"3Dumb Regular";  /*text-transform:lowercase;*/
    }
    h1, h2 {
        font-family:"3Dumb Regular";
        font-size:30px;
        margin:0px;
        font-weight:normal;
    }

  12. #12
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Are these correct?

    Code:
    .logo h1 {
        color: #fc0079;
        font-weight:normal;
        font-size:52px;
        margin:0;
        font-family:3DumbRegular;  /*text-transform:lowercase;*/
    }
    h1, h2 {
        font-family:3DumbRegular;
        font-size:30px;
        margin:0px;
        font-weight:normal;
    }
    Shouldn't they be:
    Code:
    .logo h1 {
        color: #fc0079;
        font-weight:normal;
        font-size:52px;
        margin:0;
        font-family:"3Dumb Regular";  /*text-transform:lowercase;*/
    }
    h1, h2 {
        font-family:"3Dumb Regular";
        font-size:30px;
        margin:0px;
        font-weight:normal;
    }
    Hi yes they are right they are calling the font family as set up in @font face
    font-family: '3DumbRegular';

  13. #13
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed

    I used http://www.fontsquirrel.com/fontface/generator to generate the CSS and boom it works, highly advise the use of this site, fonts now work in all browsers (cept Opera)

    Thanks for your help

    Code:
    body
    {
    	margin:0;
    	font-family:Arial, Helvetica, sans-serif;
    	background:white url('images2010/bg.png') repeat-x;
    	text-align:center;
    }
    
    @font-face {
    	font-family: '3DumbRegular';
    	src: url('3Dumb.eot');
    	src: local('3Dumb Regular'), local('3dumb'), url('3Dumb.woff') format('woff'), url('3Dumb.ttf') format('truetype'), url('3Dumb.svg#3dumb') format('svg');
    }
    
    @font-face {
    	font-family: 'DiavloLightRegular';
    	src: url('Diavlo_LIGHT_II_37.eot');
    	src: local('Diavlo Light Regular'), local('DiavloLight-Regular'), url('Diavlo_LIGHT_II_37.woff') format('woff'), url('Diavlo_LIGHT_II_37.ttf') format('truetype'), url('Diavlo_LIGHT_II_37.svg#DiavloLight-Regular') format('svg');
    }
    
    @font-face {
    	font-family: 'UniversityStdRomanRegular';
    	src: url('UniversityRomanStd.eot');
    	src: local('University Std Roman Regular'), local('UniversityRomanStd'), url('UniversityRomanStd.woff') format('woff'), url('UniversityRomanStd.ttf') format('truetype'), url('UniversityRomanStd.svg#UniversityRomanStd') format('svg');
    }
    
    
    header, section, footer,
    aside, nav, article, figure {
    	display: block;
    	text-align:justify;
    }
    
    
    
    header
    {
    	background-color:#2f3241;
    	border-bottom:2px gray solid;
    	width:100%;
    	min-height:75px;
    	padding-top:25px;
    	}
    
    
    div#headerContent {  margin:auto; 	width:90%;
     }
    
    div.logo
    {
    	
    	float:left;
    	margin-left:10px;
    	margin-right:20px;
    	margin-top:-20px;
    }
    
    
    
    
     .logo h1{
        
        color: #fc0079; 
       
        font-weight:normal;
        font-size:52px;
        margin:0;
         line-height:normal; font-weight: normal; font-family: '3DumbRegular', sans-serif;   }
          
          .logo p
          {
         
          }    
          
              
          .logo span.url
          {
    	letter-spacing:5px;
    	padding-left:0px;
    	color:#ffffff;
    	line-height:normal; font-weight: normal; font-family: 'DiavloLightRegular', sans-serif;
    
    }
    
    
    /* navigation --------------------------------------------------- */
        nav {
    	padding: 7px 0 7px 0px;	height: 75px;
    	display:inline;
    	line-height:75px;
    	float:right;}
        		
        		
          nav ul {	
    			margin:0; 
    			padding:0; 
    			list-style:none;
    			}
          			
          	nav ul li {float:left; display:inline; margin:0; padding:0;}
          	
          	nav ul li a {
          	font-family:Arial, Helvetica, sans-serif;
    	      	  font-size: 19px;
    	      	  font-weight: bolder;
    	          display: block; 
    	          color: #fff;
    	          text-decoration: none;
    	          float: left; /*\*/ float:none; 
    	          padding: 7px 25px 7px 7px;
    	          line-height: 13px;
    	          border:0;
            }
            
            nav ul li a span {
    	      	  font-size: 11px;
    	      	  font-weight: normal;
    	      	  color: #67707a;
            }
            
            nav ul li a:hover {
              	   color: #fc0079;
            }
          	nav ul li#active a {
            }
    
    
    /* content ----------------------------------------------- */
    
    h1,h2 
    {
    	line-height:normal; font-weight: normal; font-family: '3DumbRegular', sans-serif;  	font-size:30px;
    	margin:0px;
    	
    }
    
    h1 {
    	font-size:35px;
    	
    }
    section#contentContainer
    {
    	width:1024px;
    	margin:auto;
    	margin-top:25px;
    }
    
    section#portfolioContainer
    {
    	width:600px;
    	margin:auto;
    }
    
    
    /* porfolio ------------------------------------------- */
    #slider1 {
        width: 720px; /* important to be same as image width */
        height: 350px; /* important to be same as image height */
        position: relative; /* important */
    	overflow: hidden; /* important */
    }
     
    #slider1Content {
        width: 720px; /* important to be same as image width or wider */
        position: absolute;
    	top: 0;
    	margin-left: 0;
    }
    .slider1Image {
        float: left;
        position: relative;
    	display: none;
    }
    .slider1Image span {
        position: absolute;
    	font: 10px/15px Arial, Helvetica, sans-serif;
        padding: 10px 13px;
        width: 694px;
        background-color: #000;
        filter: alpha(opacity=70);
        -moz-opacity: 0.7;
    	-khtml-opacity: 0.7;
        opacity: 0.7;
        color: #fff;
        display: none;
        text-align:left;
    }
    
    .clear {
    	clear: both;
    }
    .slider1Image span strong {
        font-size: 14px;
    }
    .left {
    	top: 0;
        left: 0;
    	width: 210px !important;
    	height: 100px;
    }
    .right {
    	right: 0;
    	bottom: 0;
    	width: 200px !important;
    	height: 300px;
    }
    
    
    ul { list-style-type: none;}

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad you sorted it

    Wasn't that link in the thread I mentioned earlier

  15. #15
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Does the absolute url to the font lead you to the file if you paste it in the browser?
    Hi yes it did, fixed now using http://www.fontsquirrel.com/fontface/generator

    Thank you for your help

    Damien

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes sorry - I saw your post after I posted Glad it's working now.

  17. #17
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  18. #18
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Cooper

    Thank you everyone for your help with this


Tags for this Thread

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
  •