clonetrooper9494 Posted April 28, 2010 Share Posted April 28, 2010 Resolved...I am not sure why, but I after removing "www." from the url of the font, it began to load and returned 320 Not Modified in firebug... Perhaps it was a cache error of some sort? Any ways, it is working now :/ feel free mods to delete topicI have a webpage that uses @font-family. For some reason, I can't get it to work.I am not sure what the problem is, here is some info:1. The font loads in Chome(4.1), but not FireFox(3.6.3)2. FireFox is loading the fonts on other sites, but not mine.3. I had it working a while ago but decided that using an image would be faster than loading the entire font for 2 words. Now I want a larger version of the logo and it won't load. (I had commented out the font-family stuff before now)4. FireBug tells me that the font is loading, but it is returning 206 Partial Content unlike the 304 Not Modified some other images are.Any one have any ideas?Page: http://clonedrone.com/home/ <html><head><title>CloneDrone.com - A blog, a forum, and a web dev. testing ground</title><!-- <link href="resources/images/favicon.ico" rel="shortcut icon" /> --><link href="resources/styles/default.css" type="text/css" rel="stylesheet" /><script src="resources/scripts/main.js" type="text/javascript"></script></head><body><!-- img src="http://www.clonedrone.com/home/resources/images/logo.png" --><!-- header - start --><div class="header"> <div class="logo">CLONE DRONE</div></div><!-- header - end --><!-- body - start --><div class="main"> <div id="sb">Links Links Links Links</div> <div id="content">BODY</div></div><!-- body - end --><!-- footer - start --><!-- footer - end --></body></html> CSS: http://clonedrone.com/home/resources/styles/default.css body{ font-family:'courier new', verdana, helvetica, sans-serif; background-color:black; margin:0;}/**/@font-face{ font-family: 'Pixel'; src: url('http://www.clonedrone.com/home/resources/fonts/pixel.ttf') format("truetype");}/**/.header .logo{/**/ font-family: 'Pixel'; font-size:40px; line-height:47px; /**/ background-color:white; width:255px; position:relative; height:47px; margin:auto; top:13px; border:5px solid black; text-align:center; }.header{ background-image:url('http://www.clonedrone.com/home/resources/images/header_background.png'); background-repeat:repeat-x; height:148px;}/* *********************** */#content{ color:white; border:1px solid white; min-height:500px; margin-top:25px; margin-left:25px; margin-right:300px;}/* *********************** */#sb{ position:absolute; margin-top:173px; margin-right:25px; margin-bottom:25px;/* height:80%; */ top:0; right:0; width:250px; color:white; border:1px solid white;}/* *********************** */ Link to comment Share on other sites More sharing options...
anthonyterrell Posted May 3, 2010 Share Posted May 3, 2010 I had this same issue with @font-face and cross browser support. Even if I did get it to work some of the serifs were a little off in each browser. For one of my projects I decided to use the Javascript method. Cufon It's an alternative to @font-face. I personally would rather use @font-face because of it's ease and simplicity, but I usually run into some errors. I hope this was some help for future projects.. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.