Tecnología Electrónica

Cómo cambiar la fuente de texto en HTML (etiqueta font y CSS)

HTML usa etiquetas para dar estructura. Aunque CSS es el estándar moderno para estilos, la etiqueta obsoleta <font> sigue funcionando en navegadores. Aquí ambas formas.

Método obsoleto: Etiqueta <font> (no usar en nuevo código)

Atributos: size (1-7), face (nombre fuente), color (nombre o #RRGGBB).

<p><font size="5" face="Arial, sans-serif" color="#FF0000">Texto rojo, Arial, grande</font></p>

Problemas: Mezcla contenido y presentación, repetitivo, no mantenible, obsoleto en HTML5.

Método moderno: CSS (Recomendado)

Estilo en línea (inline) - solo para pruebas rápidas

<p style="font-family: 'Segoe UI', Arial, sans-serif; font-size: 1.2rem; color: #333;">Texto con estilo CSS</p>

CSS interno (en <head>) - para una página

<style>
  body { font-family: system-ui, -apple-system, sans-serif; font-size: 1rem; line-height: 1.6; color: #222; }
  h1 { font-family: Georgia, serif; color: #1a3c5e; }
  .destacado { font-weight: 600; color: #d63384; }
</style>

CSS externo (archivo .css) - profesional, reutilizable, cacheable

<!-- En <head> -->
<link rel="stylesheet" href="estilos.css">

Archivo estilos.css:

/* estilos.css */
:root {
  --fuente-principal: 'Inter', system-ui, sans-serif;
  --color-texto: #1f2937;
  --color-primario: #2563eb;
}
body { font-family: var(--fuente-principal); color: var(--color-texto); }
h1, h2, h3 { color: var(--color-primario); font-weight: 700; }

Propiedades CSS clave para fuentes

  • font-family: pila de fuentes (fallbacks). Usa system-ui para nativa del SO.
  • font-size: rem (relativo a root), em (relativo a padre), px, %.
  • font-weight: normal (400), bold (700), 100-900.
  • font-style: italic, normal.
  • line-height: 1.5-1.7 para legibilidad.
  • color: #hex, rgb(), hsl(), variables CSS.
  • font-variant, text-transform, letter-spacing, word-spacing.
  • font (shorthand): font: italic bold 1.2rem/1.6 'Georgia', serif;.

Fuentes web (Google Fonts, Adobe Fonts, autoalojadas)

<!-- Google Fonts en <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Luego en CSS: font-family: 'Inter', sans-serif;

✅ Resumen

Usa CSS externo + fuentes del sistema o web + unidades relativas (rem). Olvida <font>.

>

<

Vida inteligente