CODEWITHSUNDEEP
cssfont-family
machineghost
machineghost

Reputation: 35790

CSS: Why Is Chrome (on Linux) Ignoring My Font-Family?

When I inspect elements on my site using the Chrome developer tool, I see the following as my element's "Computed" style:

font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium", "Helvetica Neue", Helvetica, "Roboto", Arial, "Lucida Grande", sans-serif

But if I scroll down further (to the bottom of the "Computed" tab) I see:

Rendered Fonts
Liberation Sans—Local file(11 glyphs)

Since my (Linux) OS must have Arial and sans-serif, I'm confused as to why Chrome would pick "Liberation Sans": it isn't even on my font-family list.

I'd blame my own bad CSS, but in theory the "Computed" tab shows the final/processed version of my rules, so however terrible my original CSS may have been, Chrome clearly sees my font-family list defined (and being applied) to my element ... it just ignores it.

Can anyone explain this mystery?

EDIT: I installed a font-checking program and it turns out that Linux (Mint) does not in fact come with an Arial or sans-serif font ... but even so, I thought browsers provided (at least) a basic sans-serif font, no matter what the OS? Is that incorrect?

Upvotes: 3

Views: 8224

Answers (4)

Leon
Leon

Reputation: 717

There are two font fallback mechanisms in Chrome for Linux. One is OS-level fallback. Another one is CSS specified fallback. The OS-level fallback mechanism returns Liberation Sans to Chrome instead of none or not found while Chrome asking if the HelveticaNeue available in your OS. Chrome takes the returned Liberation Sans and believes OS returned answer so ignores the CSS subsequent font fallback list.

Upvotes: 2

nim
nim

Reputation: 2441

Your font stack specifies Arial.

Arial is not present on most Linux systems for licensing reasons, and it is usually aliased to Liberation Sans, since Liberation Sans has the same dimensions (metrics) as Arial. The font design, however, is different (that's why Liberation Sans is usually not the default Linux sans serif font, its design is not popular).

Helvetica is another well-known legacy font name usually not present. If you try to use it in the font stack it will usually trigger all kinds of aliasing. It may even trigger the Liberation Sans alias before Arial (since Arial was Microsoft's poor-man Helvetica replacement when windows launched and has about the same metrics).

(When you create a PDF that specifies Helvetica on Windows it will usually substitute ArialMT).

If you only specify sans-serif you will get the system "best" sans-serif font, usually clean well-loved designs, but their dimensions vary widely from system to system.

Due to the number of broken web sites whose designers assume all systems ship with the same fonts, with identical pixel widths that can be fixed in the page design, font substitution is usually done on metric first, design second priorities.

The only way to get the same font on all clients is to use web fonts, but that will slow down your site due to the font download and users (not "designers") prefer fast pages. Web fonts demand to be careful about licensing and font unicode coverage, security-conscious users will block third-party downloads, and there is a lot of cargo-culting about obscure web font formats (opentype is sufficient in most browsers nowadays).

The kind of Apple maniac that thinks HelveticaNeue is the alpha and omega is usually satisfied with Open Sans as web font.

But even with web fonts the rendering will be slightly different since different systems use different text engines that all have their specifics, with some fonts working better than others for a given engine.

Upvotes: 8

Tommaso Felici
Tommaso Felici

Reputation: 11

Because Google Chrome, somethiing leave the WWW from the url, you can try to put it manually. Especially in Unix or Mac system.

Upvotes: -6

Lucia
Lucia

Reputation: 95

I see that you have both Helvetica and Arial in your font-family properties. I'm guessing that you want Arial when Helvetica is not available...An answered question that deals with this is: two fonts

Now, if I wanted to have only one font-family, such as Century Gothic, I would do:

font-family: "Century Gothic", CenturyGothic, AppleGothic, Sans-Serif;

This is a good guide.

My question is, why do you have so many

Upvotes: 0

Related Questions