Fonts misbehaving

HTML & CSS
1

hi ,

Im using the @font-face command in CSS and i when i make a very simple html/css doco it works perfectly, BUT, when i put it into some preexisting html/css code

The doco font changes but not to the font-family specified

any where i should look before i post all of my css

2

Sounds like you are over-riding the font rule somewhere. Check the code in Firebug and then you can see where the styles originate.

Otherwise post your html and CSS or a link to the site in question.

3

okay thats great i got firebug

how can i tell what css rules are overiding it???

on the computed tab it says the font-family is still seriff

4

Heres my css file



@font-face {
    font-family: 'adventBold1';
    src: url('Fonts/advent-bd1-webfont.eot');
    src: url('Fonts/advent-bd1-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/advent-bd1-webfont.woff') format('woff'),
         url('Fonts/advent-bd1-webfont.ttf') format('truetype'),
         url('Fonts/advent-bd1-webfont.svg#adventBold1') format('svg');
    font-weight:normal;
    font-style: normal;

}

/* -----------------------------------
primary-nav
----------------------------------- */


.navigation
{
	clear:both;
	padding: 0 0;
	background-color:green;
	width: 100%;
	margin:0 auto;
}

.navigation li
{
	display:inline;
	list-style-type:none;
	margin:0 20px 15px 0;
	width:800px;
	 
}

.navigation a
{
	
	padding: 0 15px;
	text-decoration:none;
	font-size:26px ;
	color:#FFF;
}

.navigation a:hover
{
	color:#000;
	background:green;
	border:#000 1px solid;
	
}

/* -----------------------------------
container elements 
----------------------------------- */





.container
{
	clear:both;
	padding:10px;
	background-color:#939;
	width: 1000px;
	margin:0 auto;
	overflow:hidden;
	

}





.main
{   
    
	background:red;
	float:left;
	width:605px;
	margin-right:15px;
	margin-left:10px;
	
}
#portfolio
{
	background:red;
	float:left;
	width:980px;
	margin-right:10px;
	margin-left:10px;
	
}


#portfolio img
{
	padding:15px;
	float:left;
	width:180px;
}

#portfolio table
{
	float:left;
}

#portfolio b
{
	clear:both;	
}

.main img
{
	padding:15px;
	float:left;
	width:180px;
}

.main ul
{
	float:left;
}



.aside
{
	background:orange;
	float:left;
	width:350px;
	margin-right:15px;
	
}

/* -----------------------------------
contact box
----------------------------------- */
.contact
{
	background:#FFF;
	width:350px;
}


.contact ul
{
	margin:10px 0px 0px 0px;
	padding:0px;
}


.contact li
{
	display:block;
	list-style-type:none;
	background-color:#00F;
	margin-bottom:1px;
	width:350px;
	color:#FFF;
	padding:5px 0px;
}

/* -----------------------------------
portfolio box
----------------------------------- */
.portfolio
{
	background:#3F6;
	float:left;
	margin:10px 0px 0px 0px;
	padding:0px 0px;
	
}
/* -----------------------------------
services box
----------------------------------- */

.services
{
	background:#F3C;
	float:left;
	margin:10px auto;
	padding:0px 0px;
	width:350px;
}

body 
{	
	margin: 0;
	padding: 0;
	color: .000;
	background:#333;
	font-family: adventBold1;
	
}
h1, h2, h3, h4, h5, h6 { }
h1 { }
h2 { }
h3 { }
h4 { float:left;}
h5 { }
h6 { }
p { }
a:link { }
a:visited { }
a:focus { }
a:hover { }
a:active { }
.content ol { }
.content ul { }
.content li { }
.content ul li { }
hr 
{
	margin:5px 10px;
	clear:both;
}

/* -----------------------------------
layout
----------------------------------- */

/* -----------------------------------
header
----------------------------------- */
.header
{
	background:#666;
	width:100%;
	float:left;
}

/* -----------------------------------
search-form
----------------------------------- */


/* -----------------------------------
section-nav
----------------------------------- */
.2nav
{
	
}
/* -----------------------------------
footer
----------------------------------- */


.footer
{
	clear:both;
	padding:10px;
	background-color:yellow;
	width: 1000px;
	margin:0 auto;
	overflow:hidden;
}
/* -----------------------------------
box
----------------------------------- */

/* -----------------------------------
accordian
----------------------------------- */












/* -----------------------------------
classes
----------------------------------- */
5

Is the path to the font file correct?

6

yes i have checked that numerous times

when i apply a font size it works- it makes the backup font larger.

It is like it cant find the font but the path is correct

7

The path you are using assumes that the fonts are found inside a folder called “Fonts” which resides inside the same folder that the css was called from.

You said you had the font face working on a simple page so can we see that code?

8

Thanks for your help ,

the simple code i had working.

im using to copy and paste the not working code into class by class to work backwards and find out what the problem is

9

Yes try removing code step by step until it starts working and then you should be able to pinpoint the problem. Also make sure you validate the code (html and css) to catch any silly typos.

10

This might be a stupid question, but are you sure the directory is called “Fonts” and not “fonts”? *nix Servers are case sensitive, Windows are not. I know it’s something obvious, but that one small detail is easily missed between working local and remote – and can lead you down the path of testing all sorts of crazy “what’s wrong” scenarios for naught. More than once I’ve sat there looking at the directory going “that’s right…” – when it wasn’t. (really whoever thought case sensitivity in filenames was a good idea needs a nice smack upside the head).

Also, get a fallback stack on that font declaration :smiley: – you can’t guarantee your webfonts will work everywhere or not be blocked, so fallbacks are still needed.