1

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?

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • Are you sure you have Arial font installed? Are you sure Libertion Sans isn't set in Chrome as default sans-serif font? Liberation Sans ships standard with RedHat and other Linux flavors... not too big a stretch to think your Linux browser would pick standard Linux sans-serif font. – Patrick Moore Aug 25 '16 at 19:23
  • I think you're right (see my edit). But I thought browsers provided certain fonts, so you could always rely on (say) `sans-serif`? – machineghost Aug 25 '16 at 19:27
  • I thought `sans-serif` wasn't actually a font but essentially asking the browser to provide _any_ sans-serif font (i.e. fonts without serifs). – noahnu Aug 25 '16 at 19:31
  • That makes perfect sense (and explains what I'm seeing). If either of you want to put that in the form of an answer (essentially "Even though your font-family says `sans-serif`, the browser will tell you the name of the font it used to provide `sans-serif`; it won't actually say `sans-serif`) I will happily accept it. – machineghost Aug 25 '16 at 19:32
  • Also, as a side note for any Linux users who come across this, there is a package (`ttf-mscorefonts-installer`) you can install to get all the fonts Windows users take for granted (eg. `Arial`). – machineghost Aug 25 '16 at 19:34

4 Answers4

6

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.

nim
  • 2,345
  • 14
  • 13
2

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.

Leon
  • 634
  • 1
  • 7
  • 22
0

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

Community
  • 1
  • 1
Lucia
  • 85
  • 1
  • 12
  • Short answer: I have a designer who wants `HelveticaNeue`, but we discovered it's a Mac-only font, so I found that list online somewhere that was supposed to be a good fallback set for `HelveticaNeue`. But your answer doesn't really answer my question unfortunately (please see the comments for further clarification; thanks though). – machineghost Aug 25 '16 at 19:35
-6

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

Tommaso Felici
  • 11
  • 2