What is the significance of giving multiple font family name

Question

For a project I download a template. In its style.css font family was defined as

body {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}

arial , sans-serif, Helvetica Neue are different font families then why font-family in css is defined as above.

Answer 1

Not all browsers support all the fonts.

So, giving multiple font families select the font that is supported by the browser, starting from the first font. If first font is supported then it is used, otherwise it checks if next font is supported and so on. The leftmost font that is supported is used.

font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

In this case, Lato is not supported by all browsers. So, next font Helvetica Neue is checked.

You'll also notice that the last fonts are common, that are supported by all browsers Arial and sans-serif in this case.

FROM MDN

The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a @font-face at-rule.

Web authors should always add at least one generic family in a font-family list, since there's no guarantee that a specific font is installed on the computer or can be downloaded using a @font-face at-rule. The generic family lets the browser select an acceptable fallback font when needed.