Search code examples
htmlcssfont-face

why isn't this font embed working?

   <!DOCTYPE HTML>

<HEAD>
<style type="text/css">

@font-face { font-family: Blah; src: url('../fonts/WillyWonka.ttf'); 

} 

span.header {
font-family: 'palatino linotype', palatino, serif;
font-size: 36px;
font-weight: bold;
font-variant: small-caps;
color: white;
text-decoration:none;
padding: 20pt;
}

span.content {
font-family: 'Blah', arial, serif;
font-size: 36pt;
}




#contacttable {
position:absolute;
left:20%;top:15px;
}

#contacttable td {
position:absolute;
}

</style>

</HEAD>

<BODY bgcolor="black">
<Table id="contacttable">
<tr>
<td>
<span class="header"> Title of Section </span>
<hr />
<br><br><br>
<span class="content"><font color="red">l</font><font 

color="orange">o</font><font color="yellow">w</font>

...

for some reason changing the font has made it not work. any help? (source http://theriverbendstreetbeach.org/nads/misc/showyou.html )

Solution

  • Remember that CSS url paths are relative to the CSS file (or in this case the html that declares the CSS).

    By saying url(../fonts/WillyWonka.ttf) your are instructing the browser to look one directory up from the HTML, and then down into the fonts folder:

    http://theriverbendstreetbeach.org/nads/fonts/WillyWonka.ttf

    And it would seem your font file is actually located at:

    http://theriverbendstreetbeach.org/fonts/WillyWonka.ttf

    So for this particular HTML file, I would change the url path to url(../../fonts/WillyWonka.ttf);