O elemento “font” está obsoleto. Use CSS em vez disso.

O elemento <font> foi originalmente introduzido para dar aos autores controlo sobre a renderização do texto diretamente na marcação. Um uso típico parecia com <font face="Arial" size="3" color="red">. Embora os navegadores ainda renderizem este elemento por compatibilidade com versões anteriores, está obsoleto desde o HTML5 e irá gerar um erro de validação. O validador W3C sinaliza-o porque viola o princípio da separação de responsabilidades: o HTML deve definir a estrutura e o significado do conteúdo, enquanto o CSS deve tratar da sua apresentação visual.

Usar <font> causa vários problemas práticos:

• Manutenibilidade: O estilo espalhado por tags <font> ao longo do seu HTML é extremamente difícil de atualizar. Alterar um esquema de cores pode significar editar centenas de elementos em vez de uma única regra CSS.
• Acessibilidade: O elemento <font> não tem significado semântico. Os leitores de ecrã e outras tecnologias assistivas não ganham nada com ele, e a sua presença pode confundir a estrutura do documento.
• Consistência: O CSS permite-lhe definir estilos num local e aplicá-los uniformemente em todo o seu site usando classes, seletores ou folhas de estilo externas.
• Conformidade com normas: Usar elementos obsoletos significa que o seu HTML não está em conformidade com a especificação atual, o que pode levar a renderização inesperada em versões futuras dos navegadores.

Para corrigir este problema, remova cada elemento <font> e substitua os seus efeitos visuais com propriedades CSS equivalentes. Os três atributos de <font> mapeiam diretamente para CSS:

Pode aplicar CSS como estilos inline para correções rápidas, mas usar um bloco <style> ou uma folha de estilo externa com classes é a abordagem preferida para qualquer projeto real.

Exemplos

Incorreto: usar o elemento <font> obsoleto

<p>
  <font face="Arial" size="4" color="blue">Welcome to my website</font>
</p>

Isto gera o erro do validador: O elemento “font” está obsoleto. Use CSS em vez disso.

Correção com estilos inline

Se precisar de uma substituição rápida e direta:

<p style="font-family: Arial, sans-serif; font-size: 18px; color: blue;">
  Welcome to my website
</p>

Correção com uma classe CSS (recomendado)

Usar uma classe mantém o seu HTML limpo e torna os estilos reutilizáveis:

<style>
  .welcome-text {
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: blue;
  }
</style>

<p class="welcome-text">Welcome to my website</p>

Elementos <font> aninhados substituídos com CSS

A marcação antiga às vezes usava múltiplas tags <font> aninhadas:

<!-- Obsoleto -->

<p>
  <font color="red" size="5">
    Important:
    <font face="Courier">code goes here</font>
  </font>
</p>

A abordagem correta usa elementos <span> ou tags semânticas com classes CSS:

<style>
  .alert-heading {
    color: red;
    font-size: 24px;
  }
  .code-snippet {
    font-family: Courier, monospace;
  }
</style>

<p>
  <span class="alert-heading">
    Important:
    <span class="code-snippet">code goes here</span>
  </span>
</p>

Se o texto tem um significado específico — como marcar algo como importante ou representar código — considere usar elementos HTML semânticos como <strong>, <em> ou <code> juntamente com o seu CSS:

<style>
  .alert-heading {
    color: red;
    font-size: 24px;
  }
</style>

<p class="alert-heading">
  <strong>Important:</strong>
  <code>code goes here</code>
</p>

Esta abordagem dá-lhe controlo total sobre a aparência através do CSS enquanto mantém o seu HTML significativo, acessível e em conformidade com as normas.

Saiba mais:

MDN Reference

MDN: CSS font

→