Verificação HTML: CSS: "font": X não é um valor de "font-family".

Sobre este problema HTML

A propriedade CSS abreviada font tem uma sintaxe específica definida na especificação CSS. No mínimo, requer tanto um valor font-size como um font-family. Opcionalmente, pode adicionar font-style, font-variant e font-weight antes, e pode acrescentar um valor line-height depois do font-size usando um separador de barra. A sintaxe completa tem este aspeto:

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

Quando o validador W3C reporta que um valor “não é um valor de font-family“, significa que o analisador chegou a um ponto na declaração font onde esperava encontrar um nome de família de fonte mas em vez disso encontrou algo que não conseguiu interpretar como tal. Isto acontece frequentemente em dois cenários:

Usar font quando pretendia uma propriedade específica — Por exemplo, escrever font: 300 quando apenas pretendia definir o peso da fonte. O validador tenta analisar 300 como um valor font completo, e como não há font-size nem font-family, falha.
Abreviatura font incompleta — Fornecer alguns valores mas esquecer o font-family obrigatório no final, como font: 300 16px sem um nome de família.

Isto importa porque os navegadores podem ignorar completamente uma declaração font inválida, fazendo com que o seu texto seja renderizado com estilos predefinidos ou herdados em vez do que pretendia. Manter o seu CSS válido também garante comportamento consistente entre diferentes navegadores e ajuda a manter folhas de estilo limpas e previsíveis.

Como corrigir:

Se apenas precisar de definir uma propriedade relacionada com fonte, use a propriedade específica (font-weight, font-size, font-style, font-variant ou font-family) em vez da abreviatura font.
Se quiser usar a abreviatura font, certifique-se de que inclui pelo menos font-size e font-family, e que todos os valores aparecem na ordem correta.
Lembre-se de que a abreviatura font redefine quaisquer sub-propriedades de fonte omitidas para os seus valores iniciais, por isso use-a deliberadamente.

Exemplos

Incorreto: usar `font` para definir apenas o peso

<p style="font: 300;">Este texto tem uma declaração de fonte inválida.</p>

O validador reporta que 300 não é um valor font-family válido porque a abreviatura font espera pelo menos um font-size e font-family.

Correto: usar `font-weight` diretamente

<p style="font-weight: 300;">Este texto tem um peso de fonte leve.</p>

Incorreto: `font-family` em falta na abreviatura

<p style="font: italic 300 16px;">Isto também é inválido.</p>

Mesmo que font-style, font-weight e font-size estejam todos presentes, o font-family obrigatório está em falta.

Correto: abreviatura `font` completa

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

Isto inclui todos os componentes na ordem correta: font-style, font-weight, font-size/line-height e font-family.

Correto: abreviatura `font` válida mínima

<p style="font: 16px sans-serif;">Apenas tamanho e família — o mínimo obrigatório.</p>

Correto: usar propriedades individuais em vez da abreviatura

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

Usar propriedades individuais evita as armadilhas da abreviatura e dá-lhe controlo explícito sem redefinir acidentalmente outras sub-propriedades de fonte.