Jump to content

@font-face issues


lastlifelost

Recommended Posts

I had it working just fine before, but now it's gotten all gummed up somewhere.Site: http://sosimagesonline.com/douglasbishoppoetry/contentpagehtm.htmRelevant Code:

@font-face	{	/* IE6/7/8 - Must be first */  	font-family: 	candara ;  	src: 		url( fonts/candara.eot );  	}  @font-face	{	/* FFx3.5/Safari/Op10 - Next */  	font-family:	candara ;  	src: 		url( fonts/candara.ttf )			format("truetype");  	} @font-face	{	/* IE6/7/8 - Must be first */  	font-family: 	chopinscript ;  	src: 		url( fonts/chopinscript.eot );  	}  @font-face	{	/* FFx3.5/Safari/Op10 - Next */  	font-family: 	chopinscript ;  	src: 		url( fonts/chopinscript.ttf )			format("truetype");  	} @font-face	{	/* IE6/7/8 - Must be first */  	font-family: 	irrep ;  	src: 		url( fonts/irrep.eot );  	}  @font-face	{	/* FFx3.5/Safari/Op10 - Next */  	font-family: 	irrep ;  	src: 		url( fonts/irrep.ttf )			format("truetype");  	} body	{	background: url(images/content/background.jpg) repeat-y center #dadada;	text-align: center;	font-family: candara, arial, "sans serif";	}#content  #text  .firstchar {	font-family: chopinscript, serif;	font-size: 3.5em;	float: left;	margin: -10px 5px -10px -50px;	text-align: right;	display: inline-block;	width: 75px;	line-height: 50px;}#content #title {	font-family: irrep,serif;	font-size: 42pt;	font-weight: 400;	margin: -5px 0 0;	padding: 0;	height: 42pt;}

It was working fine on my local machine (of course) and for a while during testing on the server. But when I went to email it to site's owner, the fonts just stopped displaying. Now, I can make the fonts display if I load the page from my local machine, but the matching page loaded from the server won't display the fonts.

Link to comment
Share on other sites

Good catch, but I don't think that's it. Just to be sure, I wiped the server and re-uploaded everything. Still doesn't seem to work. On the plus side, the site is degrading nicely. :)::EDIT::I went back and double checked. You were definitely on the right track. There were some case issues with some of my paths (.TTF instead of .ttf type stuff) that I fixed. It now works... sometimes. I've uploaded the page to both the client's domain and to a folder on mine. The page stored on my server renders just fine. The one on theirs still won't display the fonts. Both pages are using the same files and folders. ######, they're even hosted by the same place. Still, no joy. Below are links to the two versions and a new copy of the code:Doesn't render right -- http://bishopsky.com/contentpagehtmRenders right (for me, anyway) --http://sosimagesonline.com/douglasbishoppo.../contentpagehtmCSS:

@font-face	{	/* IE6/7/8 - Must be first */  	font-family: 	candara;  	src: 		url( fonts/candara.eot );  	}  @font-face	{	/* FFx3.5/Safari/Op10 - Next */  	font-family:	candara;  	src: 		url( fonts/candara.TTF )			format("truetype");  	} @font-face	{	/* IE6/7/8 - Must be first */  	font-family: 	chopinscript;  	src: 		url( fonts/chopinscript.eot );  	}  @font-face	{	/* FFx3.5/Safari/Op10 - Next */  	font-family: 	chopinscript;  	src: 		url( fonts/chopinscript.TTF )			format("truetype");  	} @font-face	{	/* IE6/7/8 - Must be first */  	font-family: 	irrep;  	src: 		url( fonts/irrep.eot );  	}  @font-face	{	/* FFx3.5/Safari/Op10 - Next */  	font-family: 	irrep;  	src: 		url( fonts/irrep.TTF )			format("truetype");  	} }

Link to comment
Share on other sites

when you say 'your server' do you mean the local server on your PC? I had a problem where i uploaded sql to mysql database on my windows XP, some of the table names where not all lowercase, but unknown to me, they where converted to lowercase. now the site on my local server functioned perfectly well, but when copied the sql back to the site, because linux/apache server is case sensitive it failed to read the tables, until i renamed them to how where originally named.so it could be because your path, font names, extensions don't match the case exactly your code is referencing.

Link to comment
Share on other sites

The thing that made me wonder was when you wrote that you emailed your files to the server. This is an odd (to me) way of managing files. Even if it's an automated system, some changes might be happening?

Link to comment
Share on other sites

I wonder if it's a mime-type issue. When I try to load this: http://bishopsky.com/fonts/candara.ttf , I get the generic file-not-found page. When I try to directly load http://bishopsky.com/fonts/candara.TTF , I get a couple of unknown characters and this:

</iframe></noscript></object></layer></span></div></table></body></html><!-- adsok --><script language='javascript' src='https://a12.alphagodaddy.com/hosting_ads/gd01.js'></script>

which I assume your host is adding automatically, since it appears at the top of your HTML documents.My point is, your server seems not to know what a .TTF page is, so it tries to send it like an HTML document, but the whole file doesn't get sent. When I try to get it in PHP, I get only 135 characters. Since my browser thinks this is a malformed .ttf file, of course the font is not rendered.Your other server DOES recognize candara.TTF as a legitimate .ttf file, so the font does get transmitted, read, and rendered.If this is an apache server, this little tutorial may help.

Link to comment
Share on other sites

The thing that made me wonder was when you wrote that you emailed your files to the server. This is an odd (to me) way of managing files. Even if it's an automated system, some changes might be happening?
My fault. I was unclear. I was about to email a link to the uploaded page to my client and decided to do a final test before i sent the email. This is when I noticed the rendering problems on the page. I use Filezilla to upload files to the server.
I wonder if it's a mime-type issue. When I try to load this: http://bishopsky.com/fonts/candara.ttf , I get the generic file-not-found page. When I try to directly load http://bishopsky.com/fonts/candara.TTF , I get a couple of unknown characters and this:
</iframe></noscript></object></layer></span></div></table></body></html><!-- adsok --><script language='javascript' src='https://a12.alphagodaddy.com/hosting_ads/gd01.js'></script>

which I assume your host is adding automatically, since it appears at the top of your HTML documents.My point is, your server seems not to know what a .TTF page is, so it tries to send it like an HTML document, but the whole file doesn't get sent. When I try to get it in PHP, I get only 135 characters. Since my browser thinks this is a malformed .ttf file, of course the font is not rendered.Your other server DOES recognize candara.TTF as a legitimate .ttf file, so the font does get transmitted, read, and rendered.If this is an apache server, this little tutorial may help.

I'm not sure what's going on here. Both sites are hosted by GoDaddy on matching servers. Maybe I'm being naive, but I'd think that if the sites have matching hosting, they should render the same, too. The added code is for the banner ad at the top of the bishopsky.com page. This is added because they're currently using the free hosting option (they'll upgrade after we've finished the designing phase). Maybe that has something to do with it?An interesting note - I loaded the pages this morning and found that the candara font was rendering on bishopsky. Only irrep was gumming up. I'm going to try moving some things around, maybe rename the font and reupload to see what that does.
Link to comment
Share on other sites

Update:I just tried changing the files, re-uploading, etc. to no avail. Candara still renders, but irrep won't, and neither will the chopinscript (which is fine, really. It's not being used on the site anyway...). All of the fonts render just fine when loaded to my own site, though.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...