: When using a stacked font-family, what does the browser use when NONE of the specified fonts are present? Simple HTML code example: <p>font family</p> Simple CSS code example: p {

@Nimeshi995

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.

Vote Up Vote Down

@Jessie594

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: developer.mozilla.org/en-US/docs/Web/CSS/font-family

Vote Up Vote Down

@Gretchen104

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.

Vote Up Vote Down