Validación HTML: CSS: "font": X no es un valor de "font-family".

Acerca de este problema HTML

La propiedad abreviada font de CSS tiene una sintaxis específica definida en la especificación CSS. Como mínimo, requiere tanto un valor de font-size como de font-family. Opcionalmente, puedes anteponer font-style, font-variant y font-weight, y puedes añadir un valor de line-height después del font-size usando un separador de barra. La sintaxis completa se ve así:

font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;

Cuando el validador W3C reporta que un valor “no es un valor de font-family“, significa que el analizador llegó a un punto en la declaración font donde esperaba encontrar un nombre de familia de fuente pero en su lugar encontró algo que no pudo interpretar como tal. Esto suele ocurrir en dos escenarios:

Usar font cuando querías una propiedad específica — Por ejemplo, escribir font: 300 cuando solo pretendías establecer el peso de la fuente. El validador intenta analizar 300 como un valor font completo, y como no hay font-size o font-family, falla.
Propiedad abreviada font incompleta — Proporcionar algunos valores pero olvidar el font-family obligatorio al final, como font: 300 16px sin un nombre de familia.

Esto importa porque los navegadores pueden ignorar completamente una declaración font inválida, causando que tu texto se renderice con estilos por defecto o heredados en lugar de lo que pretendías. Mantener tu CSS válido también asegura un comportamiento consistente entre diferentes navegadores y ayuda a mantener hojas de estilo limpias y predecibles.

Cómo solucionarlo:

Si solo necesitas establecer una única propiedad relacionada con la fuente, usa la propiedad específica (font-weight, font-size, font-style, font-variant, o font-family) en lugar de la propiedad abreviada font.
Si quieres usar la propiedad abreviada font, asegúrate de incluir al menos font-size y font-family, y que todos los valores aparezcan en el orden correcto.
Recuerda que la propiedad abreviada font resetea cualquier sub-propiedad de fuente omitida a sus valores iniciales, así que úsala deliberadamente.

Ejemplos

Incorrecto: usar `font` para establecer solo el peso

<p style="font: 300;">Este texto tiene una declaración font inválida.</p>

El validador reporta que 300 no es un valor válido de font-family porque la propiedad abreviada font espera al menos un font-size y font-family.

Correcto: usar `font-weight` directamente

<p style="font-weight: 300;">Este texto tiene un peso de fuente ligero.</p>

Incorrecto: falta `font-family` en la propiedad abreviada

<p style="font: italic 300 16px;">Esto también es inválido.</p>

Aunque font-style, font-weight y font-size están todos presentes, falta el font-family requerido.

Correcto: propiedad abreviada `font` completa

<p style="font: italic 300 16px/1.5 'Helvetica', sans-serif;">Esto es válido.</p>

Esto incluye todos los componentes en el orden correcto: font-style, font-weight, font-size/line-height y font-family.

Correcto: propiedad abreviada `font` mínima válida

<p style="font: 16px sans-serif;">Solo tamaño y familia — lo mínimo requerido.</p>

Correcto: usar propiedades individuales en lugar de la abreviada

<p style="font-style: italic; font-weight: 300; font-size: 16px; line-height: 1.5; font-family: 'Helvetica', sans-serif;">
  Cada propiedad establecida individualmente.
</p>

Usar propiedades individuales evita las trampas de la propiedad abreviada y te da control explícito sin resetear accidentalmente otras sub-propiedades de fuente.