Warning Nombre de font-family de varias palabras sin comillas

Por qué un nombre de fuente que contiene un espacio, como Open Sans, necesita ir entre comillas en una declaración font-family.

El validador marca un valor font-family que lista un nombre de fuente de varias palabras sin comillas alrededor (excluyendo palabras clave de familia genérica como sans-serif o monospace, que nunca llevan comillas).

Ejemplo

/* Incorrecto: dos palabras analizadas como dos identificadores separados */
.body { font-family: Open Sans, sans-serif; }

/* Correcto */
.body { font-family: "Open Sans", sans-serif; }

Por qué importa

El valor font-family de CSS es una lista separada por comas donde cada entrada es una cadena entre comillas o un identificador CSS sin comillas. Un identificador técnicamente puede contener espacios si cada palabra es un token de identificador válido, que "Open" y "Sans" individualmente lo son — así que font-family: Open Sans a menudo sí funciona en la práctica, que es precisamente lo que lo convierte en un hábito frágil en vez de algo confiablemente seguro. Los nombres de fuente que empiezan con un número, contienen puntuación distinta de un guion, o coinciden con una palabra clave reservada de CSS pueden directamente fallar al analizarse como identificador sin comillas. Poner comillas elimina la ambigüedad por completo y coincide con cómo se escribe un nombre de fuente literalmente en todos los demás lugares (la lista de fuentes del sistema operativo, el descriptor font-family de una declaración @font-face, etcétera).

Frequently asked questions

¿Los nombres de fuente de una sola palabra necesitan comillas?

No — un nombre de una sola palabra como Arial o Verdana es un identificador válido sin ambigüedad, así que las comillas ahí son opcionales. Esta revisión solo marca nombres que contienen un espacio.

¿Por qué esto no marca palabras clave genéricas como sans-serif?

Las palabras clave de familia genérica (serif, sans-serif, monospace, cursive, fantasy, system-ui y algunas otras) son palabras clave CSS reservadas, no nombres de fuente — nunca llevan comillas, y la revisión de font-family del validador las excluye precisamente por esa razón.