PDA

View Full Version : can't get @font-face to work for the past 5 hours



mcrae44
Jul 5th, 2009, 02:03 PM
Hi all. I've been working on a school project all night and am trying to get this to work, but just can't. I've been using firefox 3.5 and the latest version of safari on my laptop, to see if it works, since i already have the font installed on this desktop, but i can't get it to display no matter what i try.

here is the css:



/* Mystyle.css */

/*
* It's not recommend you edit the code between the Start Position CSS and End Position CSS comments unless you really know what
* you're doing. If you do, you could break the layout, and you could experience a lot of wacky behaviour.
*
**/

@font-face {
font-family: "SCRAWL";
src: url("www.mikesmowing.ca/.fonts/SCRAWL__.TTF") ;
}

body { font-family: "SCRAWL", serif;
}

p,ol,ul,li,td { font-size: 20px;
line-height: 120%;
}

img{
border: 1px solid black;
}

a:link {
font-family: "SCRAWL", serif;
font-size: 25px;
line-height:150%;
text-decoration:none;
color:red;
}

a:visited{
font-family: "SCRAWL", serif;
font-size: 25px;
line-height:150%;
text-decoration:none;
color:green;
}

a:hover {
font-family: "SCRAWL", serif;
font-size: 25px;
line-height:150%;
text-decoration:none;
background-image:url('linkhover.png');
background-repeat:no-repeat;
background-position: center center;
repeat: no-repeat
color:blue;
}

a:active {
font-family: "SCRAWL", serif;
font-size: 25px;
line-height:150%;
text-decoration:none;
background-image:url('linkhover.png');
background-repeat:no-repeat;
background-position:center center;
color:black;
}

h1 {
margin: 0;
padding: 0;
font-family: "SCRAWL", serif;
color:#660000;
font-size: 2.5em;
text-align: center;
}

h2 {
margin: 0;
padding: 0;
font-family: "SCRAWL", serif;
line-height:110%;
text-decoration:underline;
}

body {
/*Start Position CSS*/
margin: 0;
padding: 1em;
background-color: black;

/*End Position CSS*/
}

.header {

/*Start Position CSS*/
height: 300px;
padding: 15px;
/*End Position CSS*/

background-image:url('header1.jpg');
background-repeat:no-repeat;
background-position:center center;

text-align: center;
font: bold 3em serif;
color: #006622;
}

.maintextbackground {

/*Start Position CSS*/
width: 532px;
float: left;
margin: 0em;
padding: 60px 55px 60px 63px;
color: black;
min-height:520px;
/*End Position CSS*/
}


.links {

/*Start Position CSS*/
width: 278px;
float: left;
margin: 0em 17px 0em 0em;
padding: 0px 5px 300px 0px;
bottom: 0px;
text-align: right;


/*End Position CSS*/

background-image:url('links.jpg');
background-repeat:no-repeat;
background-position:top center;

}





.container {

/*Start Position CSS*/
width: 950px;
margin: auto;
text-align: left;
background-color:none;

/*End Position CSS*/
}

.footer {

clear: both;
}


and here is an example html page:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--The above line tells the browser what type of html to use.-->

<html>

<head>
<title>ARE YOU READY? - Home</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />



</head>

<body>

<!-- THIS DIV TAG IS RESPONSIBLE FOR LAYOUT, DON'T REMOVE IT UNLESS YOU WANT YOUR LAYOUT TO ME MESSED UP.-->
<div class="container">





<div class="header">
<!-- EDIT THIS SECTION. Code between <div class="header"> and </div> will go in the header.-->


</div>

<div class="links">
<!-- EDIT THIS SECTION. Code between <div id="links"> and </div> will go in the link bar.-->

<br><br>

<a href="index.html">Home</a><br>
<a href="company.html">Our Company</a><br>
<a href="fantasy.html">Image Work</a><br><br>

<br><br>
<a href="www.google.com">Google</a><br>
<a href="http://www.mozilla.com/en-US/firefox/all.html">Firefox 3.5</a><br>
<a href="http://www.uoguelph.ca/">Guelph U</a><br>

</div>


<div class="maintextbackground"
style= "background-image:url(background2.jpg);
background-repeat:no-repeat;
background-position:top center;">

<!-- EDIT THIS SECTION. Code between <div id="maintext"> and </div> will go in the main part of the page-->

<h1>Are You Ready for the zombie apocalypse?</h1><br>
<h2> It's coming... </h2>

<p> Face it. With all of the movies that have been made about zombies, and the countless books and stories, its only obvious that eventually humanity will screw up, and we will have a bunch of zombies on our hands.
</p><br>

<p text align="center">The question is: are you going to be one of the people that gets gobbled up, or one of the people that beats their asses down with an aluminum baseball bat?
</p> <br>

<hr>
<p> Some simple steps you can take at home:
<ol>
<li> Keep a ton of food, guns, and water around. And gasmasks.</li
<li> Know someone who has a boat. Boats are the best places to be during the zombie apocalypse.</li>
<li> If you can't find a boat, then make friends with someone who lives in the country, or on a mountain. zombies will get you eventually, maybe, but later is better than sooner in this case.</li>
</ol>
</p>

<p>
This is a table demonstrating the likely outcome if you hire us versus if you dont hire us, during a zombie apocalypse:
<table border="1" align="center" >
<tr>
<td>Hire Us</td>
<td>Don't Hire Us</td>
</tr>
<tr>
<td>You Survive</td>
<td>You Die</td>
</tr>
</table>

</div>









<!-- THIS DIV TAG IS RESPONSIBLE FOR LAYOUT, DON'T REMOVE IT UNLESS YOU WANT YOUR LAYOUT TO ME MESSED UP.-->
<div class="footer"></div>
</div>
</body>
</html>


the site is avaliable at www.mikesmowing.ca/CIS/index.html , and the font is avaliable at dafont, and i put it on my server at www.mikesmowing.ca/.fonts/SCRAWL__.TTF

I'm sure someone here will be able to figure out what i'm doing wrong - I'd very much so appreciate it.

drhowarddrfine
Jul 5th, 2009, 02:57 PM
Remove the quotes in the URL for the fonts.

gsnedders
Jul 5th, 2009, 07:04 PM
You need the "http://" in the URL (quotes are optional within url(), they aren't a problem).