Actually that was pretty crystal clear, especially after delving into the w3c documents that covered the @font-face specification. (http://www.w3.org/TR/css3-fonts/#font-face-rule)
I still haven’t figured out how to get the @font-face code working.
According to the specification:
The general form of an @font-face at-rule is:
@font-face { <font-description> }
where has the form:
descriptor: value;
descriptor: value;
[...]
descriptor: value;
Comparing this to the code I have:
/*[Redacted] STYLE SHEET*/
@import url("page.css");
@import url("heading.css");
@import url("image.css");
@import url("text.css");
@import url("nav.css");
@import url("table.css");
@font-face {
font-family: 'Debussy';
src: url('debussy.eot'); /* IE9 Compat Modes */
src: url('debussy.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
url('debussy.woff') format('woff'); /* Modern Browsers */
url('debussy.ttf') format('truetype'); /* Safari, Android, iOS */;
};
It would seem that I meet those specs. I have curly brackets that wrap around the code. If I was to remake it from scratch, it would be something like:
@font-face {
}
User agents which do not understand the @font-face rule encounter the opening curly bracket and ignore forward until the closing curly bracket. This at-rule conforms with the forward-compatible parsing requirement of CSS, parsers may ignore these rules without error. Any descriptors that are not recognized or implemented by a given user agent must be ignored. @font-face rules require a font-family and src descriptor, if either of these are missing the @font-face must be ignored.
In cases where user agents have limited platform resources or implement the ability to disable downloadable font resources, @font-face rules must simply be ignored; the behavior of individual descriptors as defined in this specification should not be altered.
Now this is where I got confused. As you can see in my code, the @font-face is AFTER all of the @import[‘s]. I had to put it there because if I put it before all of the @imports, Firefox, and Chrome would simply stop parsing the CSS and the entire pages’ formatting would be dropped in the process, giving me a white background with all of the text on my webpage black. Also, since all of the navigation bars of my website are CSS based, and they are referenced in the @import code, they turned into unordered lists (LOL, amsuing but frustrating in a different way).
This is indicative that I have part of the code right, but somewhere along the line I have an invalid “descriptor” value. Which, by looking in my Notepad++, seems to be the src descriptor.
I just don’t get it.
Now, when I did look at the article you linked to, it said Firefox 3.5 had full support of @font-face. Now is it possible that that support was rescinded? Possibly, but not believably, since I also tested this in Google Chrome and got the same result. Additionally, it seems that Google searches on the issue turn up that most browsers now have some form of @font-face support. It seems inconceivable at this point that the world at large is wrong and that I am correct on the issue that support doesn’t exist.
