Validación HTML: El elemento "font" está obsoleto. Usa CSS en su lugar.

Acerca de este problema HTML

El elemento  se introdujo originalmente para dar a los autores control sobre la renderización del texto directamente en el marcado. Un uso típico se veía como . Aunque los navegadores aún renderizan este elemento por compatibilidad hacia atrás, ha estado obsoleto desde HTML5 y provocará un error de validación. El validador W3C lo marca porque viola el principio de separación de responsabilidades: HTML debe definir la estructura y el significado del contenido, mientras que CSS debe manejar su presentación visual.

Usar  causa varios problemas prácticos:

Mantenibilidad: Los estilos dispersos en etiquetas  por todo tu HTML son extremadamente difíciles de actualizar. Cambiar un esquema de colores podría significar editar cientos de elementos en lugar de una sola regla CSS.
Accesibilidad: El elemento  no tiene significado semántico. Los lectores de pantalla y otras tecnologías de asistencia no obtienen nada de él, y su presencia puede desordenar la estructura del documento.
Consistencia: CSS te permite definir estilos en un lugar y aplicarlos uniformemente en todo tu sitio usando clases, selectores u hojas de estilo externas.
Cumplimiento de estándares: Usar elementos obsoletos significa que tu HTML no se ajusta a la especificación actual, lo que puede llevar a una renderización inesperada en futuras versiones de navegadores.

Para solucionar este problema, elimina cada elemento  y reemplaza sus efectos visuales con propiedades CSS equivalentes. Los tres atributos de  se mapean directamente a CSS:

Atributo de `<font>`	Equivalente en CSS
`color`	`color`
`size`	`font-size`
`face`	`font-family`

Puedes aplicar CSS como estilos en línea para soluciones rápidas, pero usar un bloque <style> o una hoja de estilo externa con clases es el enfoque preferido para cualquier proyecto real.

Ejemplos

Incorrecto: usar el elemento obsoleto ``

<p>
  <font face="Arial" size="4" color="blue">Bienvenido a mi sitio web</font>
</p>

Esto activa el error del validador: El elemento “font” está obsoleto. Usa CSS en su lugar.

Solución con estilos en línea

Si necesitas un reemplazo rápido y directo:

<p style="font-family: Arial, sans-serif; font-size: 18px; color: blue;">
  Bienvenido a mi sitio web
</p>

Solución con una clase CSS (recomendado)

Usar una clase mantiene tu HTML limpio y hace que los estilos sean reutilizables:

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

<p class="welcome-text">Bienvenido a mi sitio web</p>

Elementos `` anidados reemplazados con CSS

El marcado antiguo a veces usaba múltiples etiquetas  anidadas:

<!-- Obsoleto -->

<p>
  <font color="red" size="5">
    Importante:
    <font face="Courier">código va aquí</font>
  </font>
</p>

El enfoque correcto usa elementos  o etiquetas semánticas con clases CSS:

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

<p>
  <span class="alert-heading">
    Importante:
    <span class="code-snippet">código va aquí</span>
  </span>
</p>

Si el texto tiene un significado específico — como marcar algo como importante o representar código — considera usar elementos HTML semánticos como ,  o <code> junto con tu CSS:

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

<p class="alert-heading">
  <strong>Importante:</strong>
  <code>código va aquí</code>
</p>

Este enfoque te da control completo sobre la apariencia a través de CSS mientras mantiene tu HTML significativo, accesible y compatible con estándares.