@font-face Code Not Working


#1

Hello Again,

I do not understand why this CSS code works. I’ve read around in the standards and I believe that this is the right syntax.

I use Notepad++ to do all of my web coding, and Firefox 11.0, Google Chrome 18.0.1025.152 m, and I.E. 9 for all of my web testing.

@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 */;
	};

This not only applies to @font-face, but @media as well, in fact, anything that requires curly brackets.

For some reason, after the curly bracket { the code breaks down. Is there something I am blatantly missing here?


#2

Well, in this case it alters the CSS “parser”. So, it tells the parser to change the way it looks thru the CSS and applies it in different ways to the HTML depending on the options. Confusing, right?

Here is a link that might help:
http://reference.sitepoint.com/css/atrulesref

Hope that helps!


#3

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.


#4

What is the EXTRA semi-colon for? LOL…

); /* Safari, Android, iOS */; <—


#5

Oops, got a little too enthusiastic about semicolons. I’ve eliminated the rouge semicolon, but that seems not to be a contributing problem.

I know with this code that my server is requesting for the information that I want:

Start Log

192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /DD/dd-home.php HTTP/1.1" 200 3073
192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /DD/js/clock.js HTTP/1.1" 304 -
192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /DD/css/dd-page.css HTTP/1.1" 200 494
192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /DD/css/page.css HTTP/1.1" 304 -
192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /DD/css/heading.css HTTP/1.1" 304 -
192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /DD/css/image.css HTTP/1.1" 304 -
192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /DD/css/text.css HTTP/1.1" 304 -
192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /DD/css/table.css HTTP/1.1" 304 -
192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /DD/css/nav.css HTTP/1.1" 304 -
192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /Media/eMail.png HTTP/1.1" 304 -
192.x.x.xxx - - [12/Apr/2012:20:46:18 -0400] "GET /DD/media/img/shrouded.jpg HTTP/1.1" 304 -

192.x.x.xxx - - [12/Apr/2012:20:46:19 -0400] "GET /DD/css/debussy.ttf HTTP/1.1" 304 -

End Log

This is the correct font type (Debussy)

http://www.wunders-service.com/Media/LQ/correct_font.jpg

This is the fallback font (Comic Sans MS)

http://www.wunders-service.com/Media/LQ/fallback.jpg

(The pictures did now show in the preview, will they show in the post? Probably not…)

Also, to satisfy your curiosity, this is the HTML and CSS code that goes into displaying that heading. Note that the ~ symbols represent that the code continues beyond what I am showing you:

PHP HTML Code

~
<div class="title">
	<h1 class="title">Local Dunkin' Home Page</h1>
</div>
~

CSS Code

~
h1.title
{
margin:8px auto 2px; padding:2px; font-size:3em;
font-family: "Debussy", "Comic Sans MS", "Comic Sans", sans-serif;
color:#ff6200; text-align:center; text-shadow:1px 1px 2px #000, 0px 0px 2px #000;
max-width:700px; border-bottom:2px dotted #BBB;
}
~

#6

Well, I looked around for that font “debussy” and looked at it here to see what it looked like:
http://www.dafont.com/debussy.font?text=Local+Dunkin+Donuts

It just looks like a normal font to me. So, I was curious why you would need to alter the CSS parser and not just use the font the normal way inside of the CSS styling?

I guess I am asking what do you really get from altering the CSS parser? Should I add it to my list to learn? Can you do something really tricky with it that I am not thinking of? Curious and curious…


#7
So, I was curious why you would need to alter the CSS parser and not just use the font the normal way inside of the CSS styling?

I guess I am asking what do you really get from altering the CSS parser? Should I add it to my list to learn? Can you do something really tricky with it that I am not thinking of? Curious and curious…

I’m not sure that I am interpreting the question correctly here.

My answer to the interpretation that I am trying to alter the behavior of how the web browser parses the CSS would be no, I am not. I want to use the @font-face feature normally, without any tricks or modifications to it’s behavior.

If you are trying to ask however what my objective is with this code, it’s this.

Since Debussy is a non-standard web font, it is very unlikely that anyone else has this font. I want the users of the webpage to see that tile in Debussy font, and it seems the CSS way to achieve this is to use @font-face.

I am aware that you can use PHP code to substitute in fonts so the user will be able to see it in the browser, but this method I believe turns the text into a series of images, which aren’t selectable nor index-able without a few other tricks of PHP to go with it.


#8

Hi,

If u still got this problem I’ve got easy solution hopefully works for u.
Sometimes font-face does not work cuz of some letter issue, sometimes i dont have any idea.

Here’s the greatest tool ever
http://www.fontsquirrel.com/fontface/generator
Just upload your font and generator make you package all fonts converted with font.css for your website,

Then import just this font.css in you main style.css file
like

@import url('fonts/fonts.css');

and that’s all.

Greetings hope it will help


#9

Maverick, After a few minutes of searching the web… I found that it appears to be easy to use the @font-face.
Seems that you can use just about ANY font you wish. You do have to load it onto your site and access it
in a certain manor. Seems simple now that i have read more about it. This is what I found for code:

[php]

@font-face {
font-family: “ErnieAlex1”;
src: url(http://www.mysite.com/fonts/erniealex1.ttf) format(“truetype”);
}
h1 { font-family: “ErnieAlex1”, sans-serif }

[/php]
So, you just have to have the font on your server somewhere. (Most programmers use a “fonts” folder)
And, point to it correctly as above. So, this works with CSS2, 3 and not sure of the old standard 1…

Now, back to your original question…
[php]
@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 */;
};
[/php]
Why does this work… First, each browser travels down the CSS code and “handles” each command.
If it does not understand the command, it continues on. So, some lines are not interpreted by certain
types or levels of browsers. That is why the programmer commented the above to help others.
If you really want to understand why this code works, you would have to read the specs of each of the
different browsers. the format is different for each. For instance, the “.woff” is an open format that is
“Web Open Font Format”. It is very similar to .TTF or “True Type Font” format, but, different. Here is
a link that talks about it: http://hacks.mozilla.org/2009/10/woff/ My guess is that the
Safari, Android and iOS browsers do not handle the .WOFF format. So, that is why there is an additional
line form them to use this font in the TTF format. Sort of all makes sense when you think about it all…

Well, hope that helps, it took awhile for me to read about it all and understand it and why you were
asking questions about it. Thanks for making me learn about it. Might come in handy since I want to do
some mobile programming soon…