@font-face problem

**damienharrison** · 16th February 2010, 09:01 PM

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

**judyB** · 17th February 2010, 10:21 AM

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?

**powdarrmonkey** · 17th February 2010, 10:26 AM

Originally Posted by judyB

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

**sonofsanta** · 17th February 2010, 10:28 AM

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.

**damienharrison** · 17th February 2010, 07:44 PM

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

**damienharrison** · 17th February 2010, 08:20 PM

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

**Arthur** · 18th February 2010, 02:17 AM

Damien. Although you've solved it now, you may be interested in the following links particularly if you want to learn more about the technical details and latest gotcha's (the last one mentions a workaround for Opera too).

http://paulirish.com/2009/bulletproo...tation-syntax/
http://paulirish.com/2009/font-face-feature-detection/
http://nicewebtype.com/notes/2009/10...css-font-face/
http://www.stevesouders.com/blog/200...d-performance/
http://ajaxian.com/archives/font-fac...cross-browsers
http://www.useragentman.com/blog/200...font-face-fun/

**srochford** · 18th February 2010, 07:47 AM

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.

LinkBack

Thread Tools

Search Thread

@font-face problem

Fixed

Similar Threads

Face Register

Keeping a straight face

[MS Office - 2007] Weird Font Problem

Laptop with face-recognition

HP Black Face Plate

Thread Information

Users Browsing this Thread

Tags for this Thread

Posting Permissions