465034 - [@font-face] empty span using specified font prevents use of font on subsequent elements

Status: RESOLVED FIXED

(Core :: Layout: Text and Fonts, defect, P2)

Description

[Joe Honton]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1b1) Gecko/20081007 Firefox/3.1b1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1b1) Gecko/20081007 Firefox/3.1b1

The @font-face rule in CSS is new for this version of Firefox, but doesn't work with the font 'Arphic PGansinkaisho Heavy JIS', a Japanese language font.  The relevant CSS, taken from http://tenten-taiko.com/harmony.css, is here:

@font-face
{
	font-family: 'Arphic PGansinkaisho Heavy JIS';
	src: url('fonts/JYKA00H_1.ttf');
}
.cs_menutext_jp
{
	font-family: 'Arphic PGansinkaisho Heavy JIS';
	font-size: 24pt;
	text-align: center;
}

For comparison, see the same site using Internet Explorer, which uses the @font-face rule together with their OET technology.


Reproducible: Always

Steps to Reproduce:
1. Display page in Firefox
2. Display page in Internet Explorer
3. Compare the rendering of the typeface for the characters 天辿太鼓

Actual Results:  
The characters display in the default typeface rather than the requested typeface.

Expected Results:  
The characters should be rendered in the 'Arphic PGansinkaisho Heavy JIS' typeface.

Comment 1

[philippe (part-time)]

I downloaded that font from the (your ?) server and used it in a test case on my local dev. server: it worked correctly.

But on the http://tenten-taiko.com/, the font doesn't load indeed (it does work with Safari/WebKit).


BTW - you should change that @charset rule, bug 462458 changed the rules a bit, only double quotes ("utf-8") are allowed.

Tested with
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b2pre) Gecko/20081114 Minefield/3.1b2pre

Comment 2

[Joe Honton]

Of course downloading the .ttf to your computer would make it a locally available font if it's placed into your font folder, in which case it would always appear to be working.  Can you try a test case that points to the font on someone else's computer, or points to the original server, just to be sure the @font-face rule is triggered?

I have changed the @charset rule to use double quotes as suggested. This doesn't fix the problem.

Comment 3

[philippe (part-time)]

(In reply to comment #2)
> Of course downloading the .ttf to your computer would make it a locally
> available font if it's placed into your font folder, in which case it would
> always appear to be working.  Can you try a test case that points to the font
> on someone else's computer, or points to the original server, just to be sure
> the @font-face rule is triggered?

Of course, I tested that with @font-face. The font is _not_ installed in my font folder(s). The font _is_ used in my test case(s). I also tested this from one remote server. 

Saving the whole tenten-taiko.com page to my dev server doesn't work either though. So the issue is not one of server configuration.
While playing with that tenten-taiko, I applied the font style to the footer of the page (.cs_footer_text); surprise: that worked - that part of the page only contains roman characters.

Comment 4

[Joe Honton]

I've prepared a simple test page that shows the same text string using four different fonts: Verdana, Georgia, Bembo Book MT Std, and Arphic PGansinkaisho Heavy JIS. The first two should be on most computers, the second two need to be specified using the @font-face rule.

The test page is at http://tenten-taiko.com/font-face-test.html (and relevant parts are pasted below.)

I've also included two snapshots at the end of the test page showing how the page was rendered.  The fourth paragraph is rendered correctly by Internet Explorer, but not by Firefox.


<style type="text/css">
/* A Japanese true-type font */ 
@font-face
{
	font-family: 'Arphic PGansinkaisho Heavy JIS';
	src: url('http://tenten-taiko.com/fonts/JYKA00H_1.ttf');
}
/* The same Japanese true-type font converted to EOT format with WEFT tool for use with Internet Explorer */
@font-face
{
	font-family: 'Arphic PGansinkaisho Heavy JIS';
	src: url('http://tenten-taiko.com/fonts/ARPHICP0.eot');
}
/* A Latin open-type font with typeface characters ending at π (pi) 0x03C0 */
@font-face
{
	font-family: 'Bembo Book MT Std';
	src: url('http://tenten-taiko.com/fonts/BemboBookMTStd-Regular.otf');
}
.cs_en1
{
	font-family: Verdana;
	font-size: 36pt;
}
.cs_en2
{
	font-family: Georgia;
	font-size: 36pt;
}
.cs_en3
{
	font-family: Bembo Book MT Std;
	font-size: 36pt;
}
.cs_jp1
{
	font-family: 'Arphic PGansinkaisho Heavy JIS';
	font-size: 36pt;
}
</style>
</head>
<body>
	<p>cs_en1 (Verdana) <span class='cs_en1'>TenTen Taiko 天辿太鼓</span></p>
	<p>cs_en2 (Georgia) <span class='cs_en2'>TenTen Taiko 天辿太鼓</span></p>

	<p>cs_en3 (Bembo Book MT Std) <span class='cs_en3'>TenTen Taiko 天辿太鼓</span></p>
	<p>cs_jp1 (Arphic PGansinkaisho Heavy JIS) <span class='cs_jp1'>TenTen Taiko 天辿太鼓</span></p>
</body>
</html>

Comment 5

[philippe (part-time)]

Attachment: screenshot

Hmm, interesting.

1. With the test page in comment 4: the font doesn't load/download with that test case. According to LiveHTTPHeaders, the file is never requested.

2. I saved the page (and resources) to my local dev server
    a. as is, the font doesn't load.
    b. I commented out the code to the EOT file: the font loads (attached screenshot).
    c. I moved the code for the EOT file _before_ the code for the TTF file: the TTF file loads fine. Like this:

/* The same Japanese true-type font converted to EOT format with WEFT tool for use with Internet Explorer */
@font-face
{
	font-family: 'Arphic PGansinkaisho Heavy JIS';
	src: url('./font-face-test_files/ARPHICP0.eot');
}
/* A Japanese true-type font */ 
@font-face
{
	font-family: 'Arphic PGansinkaisho Heavy JIS';
	src: url('./font-face-test_files/JYKA00H_1.ttf');
}

Note that it doesn't solve the issue with the original URL.

Comment 6

[Joe Honton]

I've run your test case and find the same results: the order of the two font-face rules is important, with the OET rule coming first and the TTF rule coming second, things work cross-browser.

There is another problem here though and that is the presence of an empty <span> element using the rule.  In a new test file (http://tenten-taiko.com/font-face-test2.html) I've narrowed the problem down: a <span> with no text apparently does not trigger the font download, but does add the font name to some internal cache of names; all subsequent usage of the font finds the name in the cache, but not the font itself. The work-around it to add some text to the <span> element such as &nbsp;

<style type="text/css">
/* A Japanese true-type font converted to EOT format with WEFT tool for use with Internet Explorer */
/* This must precede the Firefox syntax */
@font-face
{
	font-family: 'Arphic PGansinkaisho Heavy JIS';
	src: url('http://tenten-taiko.com/fonts/ARPHICP0.eot');
}
/* The same Japanese true-type font, using syntax for Firefox */ 
/* This must follow the Internet Explorer version */
@font-face
{
	font-family: 'Arphic PGansinkaisho Heavy JIS';
	src: url('http://tenten-taiko.com/fonts/JYKA00H_1.ttf');
}
.cs_en1
{
	font-family: Verdana;
	font-size: 36pt;
}
.cs_jp1
{
	font-family: 'Arphic PGansinkaisho Heavy JIS';
	font-size: 36pt;
}
</style>
</head>
<body>
	<!-- The following line contains the first reference to the font in a <span> element with no text, intended for use at a
		later time using Javascript.  The presence of this element causes all subsequent usage of the font to
		fail. The work-around is to place some text into the element, a space (&nbsp;) for example works well. -->
	<p><span class='cs_jp1'></span></p>
	<p class='cs_jp1'>TenTen Taiko 天辿太鼓</p>
	<p class='cs_en1'>TenTen Taiko 天辿太鼓</p>

</body>

Comment 7

[philippe (part-time)]

(In reply to comment #6)

1. Thanks for confirming that the order of the @font-face rules causes problems. It shouldn't matter (it doesn't cause problems in WebKit).

2. empty span: yep, that is the issue affecting the Tenten Taiko page.


Basically, we found 2 bugs here: the empty span issue (this bug, I've clarified to summary to make it clear) and an issue with the order of @font-face rules for which I filed bug 465450.

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I'm guessing the issue with empty spans will be fixed by "patch 8" in bug 457821; I'll test that shortly...

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Yes, a Mac build with my changes does show the font in the first line of http://tenten-taiko.com/font-face-test2.html whereas a nightly does not.  I'm pretty sure that's because of patch 8 in bug 457821.

Taking bug on that basis, although I notice John took it a few minutes ago.

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

And I now also confirmed that that patch is actually the one that fixes it.

Comment 11

[philippe (part-time)]

Based on local copies of the testcases, this works fine now that bug 457821 has landed. I can't test the tenten-taiko site, or the testcase hosted there: login required :-(.

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Marking fixed by bug 457821.