Guía de inicio rápido para las API de fuentes web

Guía de inicio rápido para las API de fuentes web

¿Qué es una API de fuentes?

Concepto	Descripción
Servicio de fuentes web	Biblioteca alojada (p. ej., Google Fonts, Adobe Fonts) que proporciona fragmentos de CSS <link> o JavaScript para obtener archivos de fuentes de una CDN.
CSS @font-face	API de navegador de bajo nivel que indica al agente de usuario dónde descargar un archivo de fuente y qué nombre de familia exponer a CSS.
API de fuentes variables	Sintaxis más reciente (font-variation-settings, rangos de ejes) que permite que un solo archivo exponga varios estilos (grosor, ancho, inclinación, etc.).
Descriptor de visualización de fuentes	Controla cómo se renderiza el texto mientras se carga la fuente (auto, block, swap, fallback, optional).
Asistentes de carga de JavaScript	Ayudantes opcionales (constructor FontFace, document.fonts.load()) para cargar o precargar fuentes sobre la marcha.

Todos estos pertenecen a la familia “Font API” porque exponen formas programáticas de solicitar y utilizar fuentes.

Terminología CSS básica

Propiedad / palabra clave	Significado
font-family	El nombre que se usa en CSS después de cargar la fuente.
src	URL de los archivos de la fuente (.woff2, .woff, .ttf, …).
unicode-range	Subconjunto de caracteres que abarca un archivo determinado: ideal para subconjuntos.
font-weight / font-style / font-stretch	Descriptores estáticos clásicos.
font-variation-settings	Pares clave/valor para ejes de variables ('wght' 400).
font-display	Estrategia de renderizado alternativo mientras se carga la fuente.

Uso del CSS @font-face integrado (autohospedado)

<!-- 1️⃣ Put the font files on your server (or CDN) -->
<link rel="preload" href="/fonts/Inter-Variable.woff2"
      as="font" type="font/woff2" crossorigin>

<style>
  /* 2️⃣ Declare the family */
  @font-face {
    font-family: 'Inter Variable';
    src: url('/fonts/Inter-Variable.woff2') format('woff2');
    /* Optional – load only Latin characters */
    unicode-range: U+0000-00FF;
    /* Show fallback text until the font is ready */
    font-display: swap;
  }

  /* 3️⃣ Use it */
  body {
    font-family: 'Inter Variable', system-ui, sans-serif;
  }
</style>

Beneficios: control total sobre el almacenamiento en caché, las licencias y los subconjuntos; funciona sin conexión si agrupa los archivos.

Google Fonts CSS API (la API de fuentes públicas más común)

<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&
family=Open+Sans:ital,wght@0,400;0,600;1,400&
display=swap"
rel="stylesheet">

Explicación

Parte	Qué hace
family=Roboto:wght@400;700	Solicita solo los grosores normal y negrita de Roboto.
family=Open+Sans:ital,wght@0,400;0,600;1,400	Carga Roman regular/seminegrita + cursiva regular de Open Sans.
display=swap	Usa texto de respaldo hasta que las fuentes terminen de cargarse (recomendado para la experiencia de usuario).

Luego en CSS:

h1 { font-family: 'Roboto', sans-serif; }
p  { font-family: 'Open Sans', sans-serif; }

Consejos

• Combine varias familias en una sola solicitud: reduce los viajes de ida y vuelta HTTP.
• Utilice rangos de ejes para fuentes variables: family=Inter:wght@200..800.

Ejemplo de fuente variable (Google Fonts)

<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@200..800&display=swap"
rel="stylesheet">

<style>
  .hero {
    font-family: 'Inter', system-ui;
    /* Animate weight from thin → bold */
    font-variation-settings: 'wght' 200;
    transition: font-variation-settings .6s ease;
  }
  .hero:hover { font-variation-settings: 'wght' 800; }
</style>

Por qué es importante: Un archivo reemplaza docenas de .woff2s estáticos → carga útil dramáticamente más pequeña.

API de carga de fuentes JavaScript (FontFace)

Cuándo usar: necesitas cargar una fuente después de cargar la página (por ejemplo, en el enrutamiento SPA) o quieres esperar a que esté lista antes de mostrar la interfaz de usuario.

// Create a FontFace object
const myFont = new FontFace(
  'Custom Serif',
  'url(/fonts/CustomSerif-VF.woff2) format("woff2")',
  { weight: '400 900', style: 'normal' }   // optional descriptors
);

// Add it to the document’s FontFaceSet
document.fonts.add(myFont);

// Start loading
myFont.load().then(() => {
  // Font ready → apply it
  document.body.style.fontFamily = '"Custom Serif", serif';
}).catch(err => console.error('Font failed', err));

También puedes consultar qué fuentes están cargadas:

document.fonts.ready.then(() => console.log('All fonts ready'));

Adobe Fonts (Typekit): otra API de fuentes públicas

<link rel="stylesheet" href="https://use.typekit.net/xyz123.css">

Luego haga referencia a las familias exactamente como se enumeran en el kit:

h2 { font-family: "adobe-caslon-pro", serif; }

Diferencias clave frente a Google Fonts

• Requiere una cuenta de Adobe y un ID del kit de inserción (xyz123).
• Proporciona opciones de carga sync y async (<script>… Typekit.load(); </script>).

Mejores prácticas de rendimiento

1. Subconjuntos: solo los glifos necesarios: use el parámetro unicode-range o text= de Google Fonts.

2. Aproveche la precarga para fuentes críticas:

<link rel="preload" href="/fonts/Inter-Variable.woff2"
      as="font" type="font/woff2" crossorigin>

3. Establezca font-display al menos en swap. Evite “bloquear” la representación de texto, lo que perjudica la métrica CLS (Cumulative Layout Shift).

4. Combine familias en una sola solicitud cuando utilice Google Fonts o Adobe Fonts.

5. Caché persistente: la mayoría de las CDN envían encabezados Cache-Control de futuro lejano para archivos woff2.

Hoja de referencia rápida

API	Cómo solicitar	Caso de uso típico
CSS @font-face	<style>@font-face{…}</style> + <link rel="preload"> opcional	Fuentes alojadas en el servidor, control total
Google Fonts CSS API	<link href="https://fonts.googleapis.com/css2?...">	Fuentes gratuitas con parámetros de URL sencillos
Adobe Fonts (Typekit)	<link href="https://use.typekit.net/xxxx.css">	Biblioteca de pago con integración con el sistema de diseño
API JS de FontFace	new FontFace(name, src[, descriptors])	Carga dinámica en SPAs/paquetes de tiempo de ejecución
Rango de ejes de fuentes variables	family=Inter:wght@200..800 o CSS font-variation-settings	Reduce el número de archivos y habilita transiciones de grosor suaves

Ejemplo de código TL;DR: una sola línea para la mayoría de los proyectos

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
      rel="stylesheet">
<style>
  body {font-family:'Montserrat',Arial,sans-serif;}
</style>

✅ Carga solo texto regular y en negrita → descarga mínima. ✅ display=swap garantiza un texto de respaldo rápido → buena experiencia de usuario. ✅ Funciona en todos los navegadores modernos sin JavaScript adicional.

---

¿Qué pasa con Aspose?

Si necesita manipular o convertir archivos de fuentes en el lado del servidor (por ejemplo, generar subconjuntos, convertir entre TTF/WOFF2 o extraer métricas de glifos), la biblioteca Aspose.Font proporciona una API programática para .NET, Java y Python. Se puede integrar en procesos de compilación o servicios de back-end para preparar los recursos de fuentes antes de que se entreguen a través de cualquiera de las API de fuentes descritas anteriormente.

---

¿Listo para insertar?

Copie cualquiera de los fragmentos anteriores en su HTML/CSS/JS y tendrá una integración de Font API lista para producción en segundos. ¡Feliz diseño!