Question

I tried googling this but couldn’t find an answer, I know Arial comes first…

Also, I’ve seen people do

font-family: sans-serif, arial, 2nd font in sans-serif, 3rd font in sans-serif...

Where it seems that after sans-serif, they’re listing all the fonts in that family in the respective order. Isn’t that unnecessary work since sans-serif is the catch-all for that group of fonts in that order?

Answer 1

Per the w3:

Generic font families are a fallback mechanism, a means of preserving
some of the style sheet author’s intent in the worst case when none of
the specified fonts can be selected. For optimum typographic control,
particular named fonts should be used in style sheets.

Fonts should be listed in the order you would like them used, then the browser will attempt to apply them in order, proceeding through the list as needed when it cannot match a font on the user’s system.

So it really makes no sense to list fallback fonts first as they would be applied before a non-generic font family rendering fonts like (in your example) Arial to be ignored and sans-serif top be applied. It’s the same as just using font-family: sans-serif;.