PDA

Click to See Complete Forum and Search --> : @fontface not working (firefox 3)

pspsampsp
06-06-2009, 06:04 PM
im trying to embed a font using css , however it is not working , my css (level 3) and html (4.01 strict) validates with the w3c validators , maybe someone could take a look at my code and see if they can find any problems.

css:

html {
height: 100%;
}

@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://fung4mes.co.cc/css/=VeraSeBd.ttf");
}

body > #wrap {
height: auto; min-height: 100%;
}

body ,th {
margin: 0;
padding: 0px;
overflow-y: scroll;
height: 100%;
}

#wrap {
margin-left: auto;
margin-right: auto;
width: 901px;
font-family: "Bitstream Vera Serif Bold", serif;
height: 100%;
}

#banner {
width: 900px;
height: 155px;
}

#menu {
width: 900px;
height: 30px;
float: left;
}

#body {
font-size: 18px;
margin-top: 2px;
width: 900px;
float: left;
margin-left:1px;
font-family: "Bitstream Vera Serif Bold", serif;
}

#ad {
margin-left: auto;
margin-right: auto;
height: 60px;
width: 900px;
position: relative;
margin-top: -125px;
}



.floatl {
float: left;
margin-right: 5px;
}

.floatr {
float: right;
margin-right: 3px;
}

#menul {
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
width: 440px;
font-size: 16px;
}

#menul ul {
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #FFFFFF;
border-width: 1px 0;
float: left;
}

#menul ul li {
display: inline;
}


#menu ul li a{
float: left;
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
}

#menul ul li a:hover {
background-color: #F3F3F3;
}


html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<html>
<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" >
<title>Fun G4mes</title>
<link rel="stylesheet" type="text/css" href="/css/layout.css">
</head>
<body>
<div id="wrap">

<div id="banner">
<img src="/images/banner.png" alt="banner">
</div>

<div id="menu">

<div class="floatl">
<img src="/images/bulletop.png" alt="banner">
</div>

<div class="floatr">
<img src="/images/bullet.png" alt="banner">
</div>

<div id="menul">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Games List">Games List</a></li>
<li><a href="#" title="New">Help</a></li>
<li><a href="#" title="Suggestions">Suggestions/Requests</a></li>
</ul>

</div>

</div>

<div id="body">
Tesiting testing is this the right font?
</div>

</div>
<div id="ad">
<!-- bidvertiser code will go here -->
</div>
</body>
</html>


hope to get an anwser , sam.
David Harrison
06-06-2009, 06:11 PM
Are you sure you have that font installed correctly on the computer?

Even if you do though, don't expect any significant proportion of your users to.
pspsampsp
06-06-2009, 06:20 PM
i just solved my own problem , only firefox 3.5 currently supports the css i am trying to use :

"src: url(font.ttf);"

https://developer.mozilla.org/en/CSS/@font-face
David Harrison
06-06-2009, 06:33 PM
Ah right, I didn't read carefully enough there, didn't see you were embedding the font.

The src rule seems to have been around for a while, try converting the font file to a .pfr and then following the instructions on this page:
http://www.netmechanic.com/news/vol3/css_no15.htm

That might allow your font to be seen by more people.

Alternatively, if you don't have a huge body of text, try using the sIFR method (http://www.mikeindustries.com/blog/sifr/).