+ Post New Thread
Results 1 to 8 of 8
Web Development Thread, @font-face problem in Coding and Web Development; Hi I am having problems with @font-face working in firefox and chrome Code: @font-face { font-family: '3DumbRegular'; src: url('3Dumb.eot'); src: ...
  1. #1

    Join Date
    Jun 2007
    Location
    Middlesbrough
    Posts
    143
    Thank Post
    17
    Thanked 10 Times in 10 Posts
    Rep Power
    16

    @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
    judyB's Avatar
    Join Date
    Feb 2009
    Location
    Manchester
    Posts
    34
    Thank Post
    8
    Thanked 10 Times in 10 Posts
    Rep Power
    12
    I don't think firefox supports font embedding - so it's never going to work. It's been a while but that used to be the case, I'd look into it before tearing your hair out anyway!

    will firefox support embedded fonts like WEFT?

  3. #3

    powdarrmonkey's Avatar
    Join Date
    Feb 2008
    Location
    Alcester, Warwickshire
    Posts
    4,859
    Thank Post
    412
    Thanked 777 Times in 650 Posts
    Rep Power
    182
    Quote Originally Posted by judyB View Post
    I don't think firefox supports font embedding - so it's never going to work. It's been a while but that used to be the case, I'd look into it before tearing your hair out anyway!

    will firefox support embedded fonts like WEFT?
    False for FF >= 3.0: https://developer.mozilla.org/en/CSS/@font-face

  4. #4

    sonofsanta's Avatar
    Join Date
    Dec 2009
    Location
    Lincolnshire, UK
    Posts
    4,913
    Thank Post
    856
    Thanked 1,424 Times in 979 Posts
    Blog Entries
    47
    Rep Power
    613
    Silly question, but - you say it works locally but not when the site is live - you have uploaded the font file haven't you?

    Might be worth giving it an absolute reference rather than a relative, just to make sure everything is clear.

    Embedding fonts has always been a pain in the arse, though. Bad practice as it is, if I want a shiny font for a header, I usually just use an image. Body text doesn't want to be too weird anyway.

    EDIT: it may also be that the format attribute is confusing FF, as it isn't mentioned in the page linked by powdarrmonkey - although that wouldn't explain why it works locally but not live.
    Last edited by sonofsanta; 17th February 2010 at 10:31 AM.

  5. #5

    Join Date
    Jun 2007
    Location
    Middlesbrough
    Posts
    143
    Thank Post
    17
    Thanked 10 Times in 10 Posts
    Rep Power
    16
    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%;
    	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;
    }

  6. #6

    Join Date
    Jun 2007
    Location
    Middlesbrough
    Posts
    143
    Thank Post
    17
    Thanked 10 Times in 10 Posts
    Rep Power
    16

    Fixed

    Fixed

    I used Font Squirrel | Create Your Own @font-face Kits to generate the CSS and boom it works, highly advise the use of this site, fonts now work in all browsers (cept Opera)

    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;}

  7. #7


    Join Date
    Feb 2007
    Location
    51.405546, -0.510212
    Posts
    8,747
    Thank Post
    221
    Thanked 2,626 Times in 1,936 Posts
    Rep Power
    778

  8. #8

    Join Date
    Aug 2005
    Location
    London
    Posts
    3,154
    Thank Post
    114
    Thanked 527 Times in 450 Posts
    Blog Entries
    2
    Rep Power
    123
    Completely different approach, but I read about FontJazz - Embed fonts on web pages this morning - it will work even with mobile browsers when you want to get different fonts on screen.

SHARE:
+ Post New Thread

Similar Threads

  1. Face Register
    By alan-d in forum MIS Systems
    Replies: 8
    Last Post: 17th March 2010, 07:54 AM
  2. Keeping a straight face
    By SteveBentley in forum General Chat
    Replies: 5
    Last Post: 26th January 2010, 03:50 PM
  3. [MS Office - 2007] Weird Font Problem
    By Simcfc73 in forum Office Software
    Replies: 1
    Last Post: 27th May 2009, 03:45 PM
  4. Laptop with face-recognition
    By matt40k in forum Hardware
    Replies: 2
    Last Post: 15th April 2009, 09:39 AM
  5. HP Black Face Plate
    By Michael in forum Hardware
    Replies: 0
    Last Post: 3rd March 2009, 11:02 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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