7

Simple HTML code example:

<p>font family</p>

Simple CSS code example:

p {
    font-family: Arial, Helvettica, sans-serif;
}
  1. Browser looks for Arial
  2. Arial is not present then it looks for Helvettica
  3. Helvettica is not present then it looks for sans-serif

Questions

  • What will happen if browser does not find any these font families?
  • If the browser uses a default font, what font does it use?
| improve this question | |
  • 4
    Btw "Helvettica" only has one t. sans-serif is a "generic" font family, there is no font called "sans-serif" (which you seem to imply). The default "sans-serif" font is set (and is customisable) in the browser. Arial and Helvetica are both sans-serif fonts. The default sans-serif font is likely to be Arial on Windows and Helvetica on OS X. See also webmasters.stackexchange.com/questions/33793/… – MrWhite Dec 17 '15 at 17:50
  • 2
    The fallback behaviour seems to be non-standardized. From the CSS Founds Module Level 3 draft section 5.2: 7. If there are no more font families to be evaluated and no matching face has been found, then the user agent performs a system font fallback procedure to find the best match for the character to be rendered. The result of this procedure may vary across user agents. – Jeremy Banks Dec 17 '15 at 21:26
9

It will not use the browser default font. But rather it will use the default sans-serif font. Since the last font in the font stack is not a specific font. It is a generic name. Some browsers allow you to set it or it will default to the OS of the users computer.

Reference URL: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

| improve this answer | |
4

It will resort to the default font of the browser. In this case with the sans-serif specification it would look for the default sans-serif font. I think for Windows this font is Arial, and for Mac it's Helvetica (don't quote me on that, it's been a long time since I've looked). If no sans-serif font exists on the machine, the browser will switch over to its global default which typically is Times New Roman. If it can't find any font in any default setting it will accept the first thing the system produces from the font manager.

| improve this answer | |
  • If your browser is using Times New Roman as its default sans-serif font, something is seriously screwed up. But, yes, without that sans-serif at the end, the browser would pick its default fallback font, which is typically the same as the default serif font, and quite often Times New Roman or something similar. – Ilmari Karonen Dec 18 '15 at 1:23
  • @IlmariKaronen: Even with the sans-serif at the end, if the system does not have any sans-serif fonts defined (unlikely but possible), it would continue to fall back on the next default which would be browser default of Times New Roman. I can see how the answer isn't explicit enough on that, though. – Joel Etherton Dec 18 '15 at 13:04
  • 1
    Technically, the standard says that "All five generic font families are defined to exist in all CSS implementations (they need not necessarily map to five distinct actual fonts)." So every CSS-compliant browser does have a "sans-serif" generic font family, although it's not strictly guaranteed to map to an actual sans-serif font. But yes, this is a very hair-splitting distinction. – Ilmari Karonen Dec 18 '15 at 19:02
  • (And of course, if we really start picking nits, there's the fact that CSS font fallback is done on a per-glyph basis. So while the standard requires every browser to have a "sans-serif" font family, it does not, AFAICT, require the fonts in that family to actually contain any glyphs.) – Ilmari Karonen Dec 18 '15 at 19:09
1

There is a falsehood that keeps getting repeated: the browser will pick the "system default" for "serif" or "sans-serif" when any other previously in the list are not available. In my tests with Firefox (Iceweasel 38 actually, on Debian Jessie 8.2), the browser is rather intelligent in how it picks a font. It will pick a different font if "sans-serif" was preceded by "Arial" that it would for "Verdana". Likewise for serifs. Further, it takes font stretching and weight into account. Just recently I noticed DejaVu Sans ExtraLight being picked automatically for a font I never heard of before. I would love to know how the algorithm works, how it works in all browsers, but this is the one answer I cannot find.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.