511556 - [@font-face] downloaded fonts sometimes render poorly under Linux

Status: NEW

(Core :: Graphics, defect)

Description

[John Daggett (:jtd)]

The example page uses Gentium and Gentium Italic as downloadable fonts on a page.  It was written for a blog post on @font-face on the hacks.mozilla.org blog. An OpenSUSE 11 user notes that this example displays terribly on his system while other Linux browsers do not:

http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/#comment-3123

Comparisons:

Firefox 3.5.2
http://static.zooomr.com/images/7931158_b05f09ffb8_o.png

Epiphany 2.22.1.1
http://static.zooomr.com/images/7931142_a2ad0d7e1f_o.png

Konqueror 4.0.4
http://static.zooomr.com/images/7931167_a0b8f3269c_o.png

Opera 9.6.4
http://static.zooomr.com/images/7931181_c13e043ea0_o.png

Karl noted in a comment on the blog page:

"It looks like Firefox is using hintstyle:hintfull and rgba:rgb, whereas the other applications are using something like hintstyle:hintslight and rgba:none. Not all applications always respect fontconfig rules, which may explain the difference.

Firefox will use screen settings, and let fontconfig rules tweak these.
Check ~/.fonts.conf and files in /etc/fonts/conf.d to see if hintfull or rgba values are replaced there.

The main problem I see here is that the native hinter is not producing good results with Gentium Italic. This may be because the hint instructions in the font are not so good."

Is there a way we can assure that downloadable fonts don't render poorly like this?

Comment 1

[John Daggett (:jtd)]

Attachment: OpenSUSE 11 renderings for FF3.5, Epiphany, Konqueror, Opera

Composite of the user's example renderings.

I think the Opera example must be from Opera 10 beta, since Opera 9 does not support downloadable fonts.

Comment 2

[Aric Bills]

Thanks to John for filing this bug report.  The browser version numbers are correct, including Opera 9; Gentium was installed on the machine used to create the screen captures.

Karl was also (essentially) correct about the fontconfig rules in place when these screen captures were made.  In my ~/.fonts.conf, hintstyle was set to hintmedium and rgba was set to rgb.  Setting these to hintslight and none, respectively, caused Firefox to render the fonts identically to the other browsers.

Comment 3

[Robert O'Callahan (:roc) (email my personal email if necessary)]

So the problem here is that we honor fontconfig and other browsers don't?

Comment 4

[Karl Tomlinson (:karlt)]

The main problem here seems to be that Gentium Italic looks like it is being
hinted badly when using FreeType with native hinting and when using MS
rasterizers without ClearType.  FreeType would use the hinting instructions in
the font in this situation, and I expect MS rasterizers would do the same.
This makes me suspect bad hinting instructions in the font.

The rendering is much better when using FreeType's autohinter and when using
ClearType.  Does ClearType use the instructions in the font?  If it does, does
it use different parameters for the instructions somehow?

I haven't seen any fonts rendered on Mac in the way that I would expect if the
bytecode hinting were used, so I suspect the rendering of Gentium Italic
doesn't look bad an Mac because the font's hinting instructions are not used
on Mac.


As for the differences between the different browsers on Linux, I see two main
differences here.


1) Only Firefox is using the hinting instructions in the font on Linux.

If Epiphany is using xulrunner-1.9.0, then this could be because
xulrunner-1.9.0 is not respecting the fontconfig rules for hintstyle.

However, the Qt-based browsers (Konqueror and Opera) do respect the fontconfig
rules.

The difference between Firefox and the Qt-based browsers is probably due to a
difference between Xft and cairo:

  Fontconfig has 4 values for hintstyle: hintnone, hintslight, hintmedium, and
  hintfull.

  Cairo and Xft produce similar results with all but hintmedium.  (hintslight
  disables instructions from the font with more recent versions of FreeType -
  since version 2.2 IIRC).

  Xft renders hintmedium exactly the same as hintslight (disabling
  instructions from the font).

  Cairo changed behavior at one point so that hintmedium no longer disables
  instructions in the font.  With cairo, the difference between hintmedium and
  hintfull is now only visible when using subpixel antialiasing.


2) Firefox is using subpixel antialiasing while other Linux browsers are
   using greyscale antialiasing.

I can't reproduce this difference in behavior, with Konqueror-3.5.10 or
Opera-9.64, so I don't know what's happening here:

Aric, would you be able to paste in this bug all fontconfig rules in
~/.fonts.conf and files in /etc/fonts/conf.d/ that modify rgba, hintstyle,
hinting, or antialias, please (from the time when you saw the difference in
behavior)?  And can you also provide the output from the following command:

  xrdb -query | grep Xft


I can't see any difference between the Konqueror and Opera renderings (with
this monitor, at least).  The Epiphany rendering is very slightly different
from the Qt browsers, which I guess may be due to small rounding differences.

Comment 5

[Karl Tomlinson (:karlt)]

(In reply to comment #0)
> Is there a way we can assure that downloadable fonts don't render poorly like
> this?

Whether the font is downloaded through @font-face or local on the system is not a factor here.

It seems that the poor rendering is due to rendering the font according to the font's instructions.

Any method to try to make this font render better would be rendering the font differently from how the font says it should be rendered.

Disabling hinting instructions on all fonts would make other fonts render worse, so really font-specific rules are needed here.  I don't think we want a list of font-specific rules in Gecko.

The best place for font-specific rules is in fontconfig files:

<match target="font" >
  <test name="fullname" >
   <string>Gentium Italic</string>
  </test>
  <edit name="autohint" >
   <bool>true</bool>
  </edit>
 </match>

Comment 6

[John Daggett (:jtd)]

Tweaks to fontconfig are fine but it's not a general solution to rendering problems with downloadable fonts, it's impractical to imagine that users will be able to tweak fontconfig settings of all possible fonts that might be seen.

Comment 7

[Aric Bills]

(In reply to comment #4)

<snip>

> Aric, would you be able to paste in this bug all fontconfig rules in
> ~/.fonts.conf and files in /etc/fonts/conf.d/ that modify rgba, hintstyle,
> hinting, or antialias, please (from the time when you saw the difference in
> behavior)?

Here is ~/.fonts.conf:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
 <match target="font" >
  <edit mode="assign" name="rgba" >
   <const>rgb</const>
  </edit>
 </match>
 <match target="font" >
  <edit mode="assign" name="hinting" >
   <bool>true</bool>
  </edit>
 </match>
 <match target="font" >
  <edit mode="assign" name="hintstyle" >
   <const>hintmedium</const>
  </edit>
 </match>
 <match target="font" >
  <edit mode="assign" name="antialias" >
   <bool>true</bool>
  </edit>
 </match>
</fontconfig>

I will attach the contents of /etc/fonts/conf.d/ to the bug separately.

> And can you also provide the output from the following command:
> 
>   xrdb -query | grep Xft

Xft.antialias:  1
Xft.dpi:        97
Xft.hinting:    1
Xft.hintstyle:  hintfull
Xft.rgba:       rgb

Comment 8

[Aric Bills]

Attachment: Contents of /etc/fonts/conf.d/ on the computer that produced the screenshots

Comment 9

[Karl Tomlinson (:karlt)]

Thanks, Aric.
I can't explain why Epiphany and the Qt browsers are using greyscale antialiasing as your settings all seem to request rgb antialiasing.

Interestingly, /etc/fonts/suse-hinting.conf has a number of rules to control whether the byte-code or auto- hinter is used.  For TrueType fonts, the default is the byte-code interpreter.  There are exceptions, which don't seem to include Gentium.

The most obvious difference between Firefox and the Qt browsers would be due to Xft disabling the byte-code interpreter with hintstyle=medium (but cairo doesn't).  I don't know enough about Epiphany 2.22.1.1 to guess what is happening there.

Comment 10

[Karl Tomlinson (:karlt)]

Is there any way that bad byte code can be detected?