[css] @font-face problem

damienharrison · February 16, 2010

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

@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.

@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 · February 17, 2010

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 · February 17, 2010

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 · February 17, 2010

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.

Edited February 17, 2010 by sonofsanta

damienharrison · February 17, 2010

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

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 · February 17, 2010

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)

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 · February 18, 2010

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/bulletproof-font-face-implementation-syntax/

http://paulirish.com/2009/font-face-feature-detection/

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

http://ajaxian.com/archives/font-face-how-to-embed-it-and-how-it-looks-across-browsers

http://www.useragentman.com/blog/2009/10/09/more-font-face-fun/

srochford · February 18, 2010

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.

[css] @font-face problem

Recommended Posts

damienharrison

judyB

powdarrmonkey

sonofsanta

damienharrison

damienharrison

Arthur

srochford

Create an account or sign in to comment

Create an account

Sign in

Recent Threads

Confirm acknowledgement of parental consent requirement for the Additional Google services

Lenovo Tablet Firmware

Outloook 365 - Classic

Home

Forums

What's New