Fonts, Firefox, X

jason_m · 07-03-2009, 07:57 PM

Hello,

I should start this by saying that, in general, I don't have a very strong grasp on how fonts are handled on a linux system. I know in the X config, font paths can be passed in, so maybe my issue lies with X and the installed fonts on my system and not any application in particular (firefox).

But, I ran into this with firefox while trying to develop a web site, and so that is what I will use to describe what I am seeing. I am working with a web site that uses Helvetica for its font, and if that is unavailable, if falls back on any sans-serif font. This is specified in a style sheet by the following:

Code:

font-family: Helvetica, sans-serif;

I noticed that commas display poorly on this web site. A screen shot is available at
http://img362.imageshack.us/img362/2408/commas.png

If I zoom in two or more times (ctl++) in firefox, then the commas start to look as they should.

I have these three questions:

1.) If the style sheet allows for "fallback" fonts, how can I tell which firefox is using to display this page?

2.) Is this an issue with firefox, X, or some other library on my system? Or possibly my hardware? (probably not, I have an nVidia GeForce 7600 GT using the proprietary nVidia driver and have a fairly recent 24" monitor running at 1920x1200.)

3.) Is there anything I can do, or is this just the present state of fonts in linux? I have a friend who I had send me a screenshot of the site I am working on from his iphone as well as his MS Vista desktop w/firefox (fairly comparable desktop hardware, same resolution) and the font looks fine in both cases. I have seen several questions about fonts and firefox in linux, and the solution generally is, "fonts will always look crappy at high resolutions, so just change resolution." However, if other systems can properly display the fonts, isn't that answer missing the point?

Thanks

i92guboj · 07-03-2009, 09:53 PM

It looks strange indeed.

For me firefox works just fine (in that regard, not so well in others). Can you reproduce this same problem in other browsers like konqueror, arora, opera...?

Most systems nowadays use fontconfig, and in which regards that and xft you don't even need the font paths in xorg.conf. In fact you can just drop any ttf font into ~/.fonts/ and it should automagically work. Some distros use custom patches for one or another reason for libxft, fontconfig and other involved packages, to get cleartype-like fonts. However I don't use any of that and I see the fonts perfectly in firefox.

I am not a master in fonts though, and the situation in linux has always seemed to me overly complex. Though lately the thing has gotten better, in my opinion.

Is there a way to see the site live so I can check if I have the same problem with these fonts?

jason_m · 07-04-2009, 09:23 AM

I created a stripped down .html document and stylesheet that reproduces this on my machine. The result can be viewed at: http://img125.imageshack.us/img125/633/commas2.png

Below are the index.html and site.css files I am using:
index.html

Code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-us" />
  <title>Test</title>
  <link href="site.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1>Testing</h1>
  <p>This is a test of sans-serif fonts in firefox.  Mainly, I am interested in how commas display.  But I'll also throw in some other characters to see if anything else looks goofy. !@#$%^&*()_+\.? ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz , , , , </p>
</body>
</html>

site.css

Code:

body {
    font-family: Helvetica, sans-serif;
}

You can just place both of those files in the same directory and point your browser at them.

Thanks

(The screen shot should say "sans serif" instead of "serif", oops. You still get the idea.)

Su-Shee · 07-05-2009, 04:39 AM

Well, mine looks "ok". (Screenshot here)

First, why don't you just use "sans-serif" without Helvetica leaving it to the user's browser and system to show the appropriate sans-serif font?

Second, you probably can't tell which font Firefox is actually using, because a user always can disable the webpage's font choice in Firefox. (I do it, for example, I really don't care for the website's designer's choice, I want readable pages..)

You can check the available font with some JavaScript - which fails to "false" if someone like me uses the parameter settings of not letting the website determine the choice of font. Instead I've set "sans-serif" and "monospace" in Firefox which are the aliases to whatever font defaults to "sans-serif" and "monospace" in my system. (Deja Vu, I think). Here's an example: http://www.lalit.org/lab/javascript-css-font-detect

And here's what my "sans-serif" default font looks like.

Third, the quality of font display under Linux depends on your setting - I use three patches (Cairo, Xft, Freetype) and I configure everything to be fully antialiased and hintstyle full and I choose a rather high resolution of X. (See screenshot for the result...)

Read this thread carefully (ignore the Slackware-part, it works with each and every distribution and many have packages with the patches anyway...) to improve the display quality of fonts.