PDA

View Full Version : @font-face simply not working



ed.melly
Jul 16th, 2009, 12:15 PM
I am trying to use the css property @font-face to deliver fonts to those browsers that support them. When I use the code below on a local machine, it works fine. However, when the site is live the body (and the headings etc whose code is similar) is reverting to lucida. I am using the latest version of Firefox (3.5) on an XP machine. You can find the site and full css here (http://www.marc.soton.ac.uk/).



body {
margin:0px;
background:#FFF;
font-family:"Delicious-Roman", "lucida grande", "lucida sans unicode", "lucida sans", arial, sans-serif;
font-size:76%;
color: #363738;
}
@font-face {
font-family:"Delicious-Roman";
src: url(../fonts/Delicious-Roman.otf) format("opentype"); /* http://www.josbuivenga.demon.nl/delicious.html */
}
@font-face {
font-family:"Delicious-Roman";
src: url(../fonts/Delicious-Bold.otf) format("opentype");
font-style:normal;
font-weight:bold;
}
@font-face {
font-family:"Delicious-Roman";
src: url(../fonts/Delicious-Italic.otf) format("opentype");
font-style: italic;
font-weight:normal;
}
@font-face {
font-family:"Delicious-Roman";
src: url(../fonts/Delicious-BoldItalic.otf) format("opentype");
font-style: italic;
font-weight:bold;
}


The only difference I can discern between the site on my local machine and when it is live is the server itself: does anyone know if the server can impact on the @font-face property or the otf files themselves? I can't think why it would but I am grasping at straws (its a Windows server).

VIPStephan
Jul 16th, 2009, 12:28 PM
If I type http://www.marc.soton.ac.uk/fonts/Delicious-Roman.otf it says there’s nothing to find. Have you actually uploaded the font and/or set the path correctly?

And P. S.: Why do you require the “www.” before the domain? That’s the fourth-level domain already and it kinda annoys me that I have to type it when it’s unnecessary actually (since you have no different content with or without it). But that's just my personal 2.

ed.melly
Jul 16th, 2009, 12:40 PM
Yeah, I've uploaded the fonts into the correct folder and the path is definitely correct. I have no idea why following that link doesn't work correctly; that is where the problem is I guess.

What would I need to change to mean that "www." is no longer required? I have no choice about the hosting and domain unfortunately, and getting the university admin staff to let me alter anything is a real pain.

VIPStephan
Jul 16th, 2009, 01:11 PM
Yeah, well, then there’s nothing we can do about it regarding the font path/location. Either it’s not where you think it is or the file name is different than you have specified (may be a typo or whatever) or server screws up somewhere. I just tested it on my personal web space and it works (i. e. it asks me if I wanna download the file).

As to the www-issue: http://davidwalsh.name/no-www-using-htaccess-file

It could be that this doesn’t work because they have disabled support for custom .htaccess files. If that’s how it is then don’t worry too much about this. It’s probably a minor issue for most people but I prefer to skip typing “www.” as it’s quicker without, and normally a server should redirect automatically (but the have to set it up).

I just set up a test page on http://www.primacom.net/~k6531190/temp/font-face.html and it works (in Firefox 3.5). Clearly, the font files are not where you specify them with the path. Also I read that the format() property doesn’t work in IE, i. e. it will ignore the rule completely.

ed.melly
Jul 16th, 2009, 01:41 PM
That's really helpful, thanks; I have checked over the file names and paths, there's nothing wrong there so it is must be some server issue.

And yeah, I recall a while ago trying to alter the htaccess file for a custom 404 page and apparently it is disabled.

Thanks again for your help; if you've any idea why the server would affect font files in this way that would be great. Is it simply a case of asking them to change the permission/add that type of file extension somewhere?

ed.melly
Jul 16th, 2009, 01:42 PM
That's really helpful, thanks; I have checked over the file names and paths, there's nothing wrong there so it is must be some server issue.

And yeah, I recall a while ago trying to alter the htaccess file for a custom 404 page and apparently it is disabled.

Thanks again for your help; if you've any idea why the server would affect font files in this way that would be great. Is it simply a case of asking them to change the permission/add that type of file extension somewhere?

drhowarddrfine
Jul 16th, 2009, 02:24 PM
I haven't had a chance to work with @font-face yet but IE does not work with open type faces like the modern browsers do. They only use .EOT types(?) while the modern browsers use everything else. I might have something turned around. I just woke up.

ed.melly
Jul 16th, 2009, 02:43 PM
Yeah, IE has apparently supported the embedding of EOT files for a while; I thought I'd start by supporting FF and the other modern browsers and then tackle trying to convert the OFT files to EOT (I'm assuming there are no copyright issues with that as long as you attribute, but I'm not sure). There's a really helpful article at Jon Tangerine's (http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work) site.

Incidentally, if anyone knows how the hell to use WEFT/if someone has already converted the (fairly common) fonts that I'm using that would be awesome.

Apostropartheid
Jul 16th, 2009, 10:08 PM
Yeah, there's a lack of standardization about, but I believe the spec. leaves it open to interpretation and at the moment the type foundaries are a bit bewildered. I believe, though, that a lightly DRMed file will become prevailent.

WEFT is evil and you're going to have to struggle through it, I'm afraid. @font-face has only just been introduced by Firefox 3.5 and has been supported for a while Safari 3+, I believe (not sure about Opera). IE has had currently nonstandard support since version 5, I think.