Estilos y Diseño Web

Tipografías: Más allá de Arial y Times

El diseño web moderno exige una identidad visual única. En este módulo aprenderás a romper las limitaciones de las fuentes preinstaladas en el sistema operativo, implementando tipografías externas mediante archivos locales y servicios en la nube.

La elección tipográfica define el carácter y la legibilidad de tu interfaz web.

La Limitación de las Fuentes del Sistema

Tradicionalmente, `font-family` solo nos permitía acceder a las fuentes que el usuario ya tenía instaladas en su ordenador (como Arial, Times New Roman o Verdana). Esto aseguraba velocidad, pero limitaba drásticamente la creatividad del diseño. Para solucionar esto, surgieron mecanismos que permiten al navegador 'descargar' y renderizar fuentes que no existen en el dispositivo del visitante.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

/* Estilo limitado a lo que tenga el usuario */
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Estilo limitado a lo que tenga el usuario */
body {
  font-family: Arial, Helvetica, sans-serif;
}

Estrategia 1: Tipografía Local (@font-face)

Esta técnica implica alojar los archivos de la fuente (ej: `.ttf`, `.woff`) dentro de tu propio servidor, igual que haces con las imágenes. La regla CSS `@font-face` actúa como un 'registro' donde le asignas un nombre a la fuente y le dices al navegador dónde encontrarla. Es la opción más robusta para garantizar que tu diseño no dependa de servicios de terceros.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

@font-face {
  font-family: "MiFuentePersonal";
  src: url("./fonts/mystery-quest.ttf");
}

/* Uso posterior */
h1 {
  font-family: "MiFuentePersonal", cursive;
}

@font-face {
  font-family: "MiFuentePersonal";
  src: url("./fonts/mystery-quest.ttf");
}

/* Uso posterior */
h1 {
  font-family: "MiFuentePersonal", cursive;
}

estructura-proyecto/
├── index.html
├── css/
│   └── styles.css
└── fonts/
    ├── mi-fuente-bold.ttf
    └── mi-fuente-regular.woff

estructura-proyecto/
├── index.html
├── css/
│   └── styles.css
└── fonts/
    ├── mi-fuente-bold.ttf
    └── mi-fuente-regular.woff

Esquema de estructura de carpetas recomendada para fuentes — Centralizar los archivos de tipografía facilita el mantenimiento y evita rutas rotas.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">

/* En tu CSS */
h1 {
  font-family: 'Roboto Slab', serif;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">

/* En tu CSS */
h1 {
  font-family: 'Roboto Slab', serif;
}

Captura de interfaz de Google Fonts mostrando el código de inserción — Al seleccionar una fuente en la plataforma, esta te genera automáticamente el código necesario para conectarla.

Local vs Web: ¿Cuál elegir?

Ambas opciones son válidas, pero dependen del proyecto: * **Local**: Tienes control total. Si Google cae (o está bloqueado en el país del usuario), tu web se sigue viendo bien. Ideal para branding corporativo estricto. * **Web (CDN)**: Es más fácil de implementar y aprovecha el caché del navegador. Si el usuario ya visitó otra web con 'Roboto', no tendrá que descargarla de nuevo.

Tabla comparativa de ventajas y desventajas entre hosting local y remoto — Evalúa rendimiento vs control antes de decidir tu estrategia tipográfica.

¿Qué formatos de fuente debo usar?

El estándar moderno es **WOFF2** (Web Open Font Format 2) porque ofrece la mejor compresión. WOFF es la alternativa compatible, y TTF/OTF suelen usarse como respaldo para navegadores muy antiguos.

¿Por qué veo un parpadeo en el texto al cargar la página?

Es el fenómeno FOUT (Flash of Unstyled Text). Ocurre mientras el navegador descarga la fuente personalizada. Se puede mitigar usando la propiedad `font-display: swap;`, que muestra una fuente básica inmediatamente y la cambia por la personalizada cuando está lista.

¿Es legal descargar cualquier fuente y usarla en mi web?

No. Debes verificar la licencia. Google Fonts es gratuito (licencia Open Font License), pero muchas fuentes comerciales requieren comprar una licencia específica para uso web ('webfont license').

¿Puedo usar @font-face con una URL externa?

Sí, el `src` puede ser una dirección web absoluta (https://...), pero debes asegurarte de que el servidor donde está alojada la fuente permita el acceso (CORS), o el navegador bloqueará la descarga por seguridad.

¿Qué significa la familia de respaldo 'serif' o 'sans-serif'?

Es la red de seguridad. Si la fuente personalizada falla o tarda en cargar, el navegador usará la fuente por defecto de esa categoría (ej: Times New Roman para serif, Arial para sans-serif) para asegurar que el texto siga siendo legible.