Josiah
27 Nov 2010, 04:46 PM
Hi there! I'm trying to use the script typeface.js (http://typeface.neocracy.org/) to render custom typefaces on a new site. The script seems to work in IE8 and Dreamweaver design view, and Opera 10, but not in Firefox 3.6 or Chrome. The script is supposed to render arbitrary text in a custom font, by converting them to <canvas> drawings.
Here's the relevant portion of my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Lost and Found</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="scripts/typeface-0.14.js"></script>
<script src="scripts/helvetica_neue_lt_com_35_thin.typeface.js"></script>
</head>
....
<div id="buttons">
<div class="narrowWrapper typeface-js">
<a class="typeface-js buttonsSmall" href="about.shtml">ABOUT</a>
<a class="buttonsSmall" href="characters.shtml">CHARACTERS</a>
<a class="buttonsSmall" href="media.shtml">MEDIA</a>
<a class="buttonsSmall" href="productions.shtml">PRODUCTIONS</a>
<a class="buttonsSmall" href="presskit.pdf">PRESS KIT</a>
</div>
</div>
</div>
And my CSS
.buttonsSmall {
width:150px;
padding-top:15px;
height:41px;
float:left;
color:#FFF;
text-align:center;
font-family:HelveticaNeueLT Com 35 Th, sans-serif;
font-weight:100;
font-size:14pt;
text-decoration:none;
display:block;
border-style:solid;
border-bottom:0;
border-top:0;
border-right-color:#000;
border-left-color:#666;
border-width:1px;
}
Anyone know what's up? I'm at the end of my rope!
Here's the relevant portion of my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Lost and Found</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="scripts/typeface-0.14.js"></script>
<script src="scripts/helvetica_neue_lt_com_35_thin.typeface.js"></script>
</head>
....
<div id="buttons">
<div class="narrowWrapper typeface-js">
<a class="typeface-js buttonsSmall" href="about.shtml">ABOUT</a>
<a class="buttonsSmall" href="characters.shtml">CHARACTERS</a>
<a class="buttonsSmall" href="media.shtml">MEDIA</a>
<a class="buttonsSmall" href="productions.shtml">PRODUCTIONS</a>
<a class="buttonsSmall" href="presskit.pdf">PRESS KIT</a>
</div>
</div>
</div>
And my CSS
.buttonsSmall {
width:150px;
padding-top:15px;
height:41px;
float:left;
color:#FFF;
text-align:center;
font-family:HelveticaNeueLT Com 35 Th, sans-serif;
font-weight:100;
font-size:14pt;
text-decoration:none;
display:block;
border-style:solid;
border-bottom:0;
border-top:0;
border-right-color:#000;
border-left-color:#666;
border-width:1px;
}
Anyone know what's up? I'm at the end of my rope!