¿Por qué las páginas web enumeran varias fuentes (Ej: font-family: ‘Helvetica’, ‘Times’, ‘Times New Roman’, serif;) en lugar de una sola?

La propiedad de font-family en CSS se usa para especificar las fuentes que desea usar para representar una página web. Hasta hace poco, no había forma de incorporar fuentes de su agrado en una página web y, por lo tanto, los desarrolladores tenían que depender de las fuentes especificadas que se instalaban en las computadoras de los usuarios. Debido a eso, font-family permite a los desarrolladores especificar las fuentes “alternativas” en caso de que la preferida no esté instalada.

Para tomar su ejemplo, font-family: 'Helvetica','Times','Times New Roman', serif – “Helvetica” es la fuente preferida y si esa fuente no está instalada, recurra a “Times”, etc. Por último , el ‘serif’ que ve no es realmente una fuente, es el nombre de una familia de fuentes y el navegador utilizará la fuente disponible para mostrar la página si ninguna de las fuentes está instalada en el sistema.

Es como crear una pila de planes.

En caso de que el plan A no sea posible (el usuario no tiene la fuente instalada en el sistema), vaya al plan B, si no, vaya al Plan C y así sucesivamente.

En el peor de los casos, opte por el Plan que funciona siempre, pero que no siempre es tan bueno.

Sin embargo, con el advenimiento de la propiedad @ font-face (método CSS), estos fallos disminuirán con el tiempo.

Utilice la respuesta de Baishampayan Ghose a esta pregunta, ya que es la más elaborada.

Familia tipográfica: arial, halvatica, sanserif

eso lo da el diseñador para la condición si el navegador no pudo obtener primero (arial) en la computadora del usuario que cambiar a halvatica y san serif

en el caso de que usted (diseñador) cargue la fuente en el sitio web, no es necesario dar muchos nombres en su familia, simplemente puede escribir

font-family: open-sans