Referencia de etiquetas

Etiqueta font en HTML: obsoleta y migración de estilos

La etiqueta  está obsoleta y no debe usarse en páginas nuevas. Servía para cambiar la fuente, el tamaño y el color de un fragmento de texto; hoy se utiliza CSS sobre el elemento apropiado. Puedes encontrarla al mantener una página antigua, por ejemplo para dar otro aspecto al nombre de una actividad. El HTML Living Standard indica que debe sustituirse por elementos adecuados o CSS.

Ejemplo histórico para reconocer font

Este código documenta el uso antiguo; no es una recomendación ni una demostración ejecutable:

<p><font face="Arial" size="4" color="#174a26">Texto destacado</font></p>

Pretendía mostrar «Texto destacado» en Arial, con el nivel de tamaño 4 y color verde oscuro. Cambiaba tres propiedades visuales sin comunicar una importancia especial. La apariencia dependía de las fuentes disponibles y del navegador.

Al modificar un atributo, cambiaba la propiedad correspondiente. Al retirar las etiquetas de  y conservar el texto, este permanecía en el párrafo, pero podía perder esos estilos; otras reglas de presentación podían seguir afectándolo.

Sintaxis y contexto históricos

En la DTD Transitional de HTML 4.01,  era un elemento en línea con apertura y cierre: …. Se admitía donde se permitía contenido en línea, como dentro de un párrafo, y podía contener texto y elementos en línea. No era un contenedor para párrafos o tablas, ni un elemento de <head>.

Sus etiquetas encerraban el contenido afectado. No era vacío: escribir  no lo cerraba en HTML. Ese contexto histórico no convierte su uso en autoría válida hoy.

Qué hacían face, size y color

La referencia histórica de HTML 4.01 sobre FONT y BASEFONT describe sus atributos de presentación:

Atributo antiguo	Función y valores históricos	Propiedad CSS actual
`face`	Nombres de fuentes separados por comas, en orden de preferencia; por ejemplo, `Arial, Helvetica`	`font-family`
`size`	Nivel de 1 a 7, o cambio relativo como `+1` o `-2`	`font-size`
`color`	Color del texto, mediante un nombre o un valor como `#174a26`	`color`

Los cambios relativos de size se calculaban sobre el tamaño base establecido por <basefont>; sin esa etiqueta, la base era 3. Todos los tamaños pertenecían a la escala 1–7. Su representación dependía del navegador: size="4" no significaba 4px, y no existe una conversión universal de esa escala a píxeles.

Esos tres atributos no deben confundirse con class, id o lang, que sirven para clasificar, identificar o declarar el idioma de un elemento. Las sustituciones de la tabla son propiedades CSS. En JavaScript, element.style.fontFamily modifica el estilo en línea; tampoco es un atributo face.

Migración completa a CSS

Guarda el siguiente documento como agenda.html en UTF-8 y ábrelo en un navegador. Incluye todo el HTML y CSS necesario; no requiere servidor, archivos de fuentes ni JavaScript.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Agenda de la biblioteca</title>
    <style>
      body {
        margin: 0;
        padding: 1rem;
        font-family: Georgia, serif;
        font-size: 1rem;
        line-height: 1.6;
        color: #222222;
        background-color: #ffffff;
      }

      main {
        max-width: 60ch;
        margin-inline: auto;
      }

      .destacado {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.25rem;
        color: #174a26;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Agenda de la biblioteca</h1>
      <p>Actividad: <span class="destacado">Club de lectura</span>.</p>
      <p>Nos reunimos los miércoles por la tarde.</p>
      <p><strong class="destacado">Aviso: la biblioteca cerrará el viernes.</strong></p>
    </main>
  </body>
</html>

Verás un título y tres párrafos sobre fondo blanco. El nombre de la actividad y el aviso tendrán texto verde oscuro, una fuente sin remates y un tamaño mayor que el texto normal. El aviso tendrá además la negrita habitual de .

La lista de font-family permite recurrir a Helvetica si Arial no está disponible y a la familia genérica sans-serif como respaldo. La tipografía exacta puede variar entre equipos. rem se calcula respecto al tamaño de fuente del elemento raíz: aquí 1.25rem es un 25 % mayor que ese tamaño, elegido para el diseño actual y sin equivalencia automática con size="4".

Estilos locales, herencia y significado

Para cambiar solo un fragmento sin añadir significado, utiliza . Si el mensaje tiene importancia, gravedad o urgencia, elige  según su significado, como en el aviso. Un encabezado requiere un elemento de encabezado, aunque quieras darle el mismo color.

Para configurar el texto general, aplica las propiedades a body o a un contenedor apropiado. font-family, font-size y color son propiedades heredables: los descendientes reciben sus valores si no hay una declaración propia que los sustituya. En el ejemplo, .destacado establece valores locales; los encabezados también pueden tener estilos del navegador.

Retira la clase destacado: el fragmento heredará la presentación general, y  conservará su significado y normalmente su negrita. Retira todo el CSS: el texto seguirá disponible. La palabra «Aviso» y el contenido explican el cierre sin depender del verde o del tamaño.

Cómo comprobar el ejemplo

Abre el archivo a anchura de móvil y escritorio. Comprueba que los párrafos se ajustan y puedes leer hasta el aviso final.
Amplía el texto al 200 % y revisa que no se recorta. Las unidades relativas permiten acompañar los cambios del tamaño raíz.
Comprueba el contraste: #174a26 sobre #ffffff tiene una relación aproximada de 10,27:1, superior al mínimo de 4,5:1 para texto normal. Si cambias texto o fondo, vuelve a calcularlo.
Cambia .destacado a font-size: 1.5rem y después retira la clase o el CSS. El contenido debe permanecer legible en cada caso.

Errores frecuentes y preguntas

¿Font está obsoleta aunque todavía funcione? Sí. El soporte para páginas antiguas no autoriza su uso en HTML nuevo. Sustituye los estilos y revisa el significado antes de eliminarla.

¿Cómo cambio fuente y color ahora? Define font-family y color en una regla CSS aplicada mediante una clase o un selector apropiado. Añade font-size cuando necesites ajustar el tamaño. <style> contiene reglas dentro del documento; una hoja externa permite compartirlas entre páginas.

¿Font face carga una tipografía? No. No confundas face con @font-face, que define una fuente para CSS y sus recursos. La propiedad CSS font combina tamaño y familia obligatorios con opciones como estilo, peso y altura de línea; no es la etiqueta HTML, y color se declara aparte.

No conviertas números de la escala antigua en píxeles por semejanza, ni utilices tamaño o color como único modo de expresar importancia.

Compatibilidad y fuentes

Estado revisado el 4 de octubre de 2026:  está obsoleta en el estándar vigente. MDN también advierte que debe reemplazarse por CSS. La documentación de HTML 4.01 explica el código histórico; el reconocimiento de la etiqueta por navegadores actuales no garantiza una apariencia idéntica. Comprueba la migración en los navegadores de tu proyecto, especialmente si cambias fuentes o colores.