Web fonts

El problema de las web-safe fonts

En CAT-20 aprendiste a declarar font-family con pilas de fuentes: font-family: Georgia, serif o font-family: Arial, Helvetica, sans-serif. Esas fuentes están instaladas en el sistema operativo del usuario — si el usuario las tiene, el navegador las usa; si no, cae al genérico.

El problema es que la lista de fuentes que están instaladas en casi todos los sistemas operativos es muy corta:

FuenteGenérico
Arial, Helveticasans-serif
Times New Roman, Georgiaserif
Courier Newmonospace
Verdana, Trebuchet MSsans-serif

Con 5 o 6 fuentes disponibles de forma confiable, el diseño tipográfico de la web quedaba muy restringido. Las páginas se parecían entre sí — no por elección estética, sino por restricción técnica.

La solución: web fonts

Una web font es un archivo de tipografía que el servidor envía junto con el HTML y el CSS. El navegador lo descarga y lo usa para renderizar el texto. El usuario no necesita tenerla instalada en su sistema.

Esto abre el acceso a decenas de miles de tipografías. El diseñador puede elegir la fuente que mejor comunique la personalidad del proyecto, sin depender de lo que venga preinstalado en el sistema operativo del visitante.

Google Fonts

Google Fonts es el servicio más popular para usar web fonts sin tener que alojar los archivos en tu propio servidor. Ofrece más de 1.000 familias tipográficas gratuitas y sirve los archivos desde su CDN.

Cómo se usa

El proceso tiene dos pasos: importar la fuente y usarla en el CSS. Son dos cosas distintas — importar trae la fuente al navegador; font-family la aplica a los elementos.

Paso 1 — importar (en el <head>):

<!-- En el <head>, antes del resto del CSS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">

Los tres elementos <link> hacen cosas distintas:

  • Los dos <link rel="preconnect"> establecen conexión anticipada con los dominios de Google. El primero conecta con el servidor que entrega la hoja de estilos; el segundo, con el servidor que entrega los archivos de fuente. Reducen la latencia de la descarga.
  • El <link rel="stylesheet"> descarga la hoja de estilos de Google Fonts, que a su vez declara el @font-face con los archivos de la fuente.

Paso 2 — usar la fuente en el CSS:

body {
  font-family: "Roboto", sans-serif;
}

El nombre de la familia es el que figura en la URL (family=Roboto) y en la página de Google Fonts. Si se escribe mal, la fuente no aplica y el navegador cae al fallback.

La variante @import — LEGACY PRÁCTICA

También existe la variante con @import dentro del CSS:

/* Primera línea del CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Funciona, pero está marcada como LEGACY PRÁCTICA: bloquea la evaluación del CSS — el archivo no se procesa hasta que el @import termina de cargar. La práctica correcta es siempre el <link> en el HTML.

Transparencia sobre el sandbox: el sandbox no puede descargar fuentes externas — el iframe no tiene acceso a la red de Google Fonts. El texto no se verá en Roboto en el preview. En la lección de práctica, el ejercicio valida que la integración esté bien armada (el <link> con los atributos correctos y la font-family declarada), no el efecto visual.

Sandbox libre — probá lo que aprendiste:

Preview