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?
| Servicio de fuentes web | Biblioteca alojada (p. ej., GoogleFonts, AdobeFonts) 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<!-- 1️⃣ Put the font files on your server (or CDN) -->
2<link rel="preload" href="/fonts/Inter-Variable.woff2"
3 as="font" type="font/woff2" crossorigin>
4
5<style>
6 /* 2️⃣ Declare the family */
7 @font-face {
8 font-family: 'Inter Variable';
9 src: url('/fonts/Inter-Variable.woff2') format('woff2');
10 /* Optional – load only Latin characters */
11 unicode-range: U+0000-00FF;
12 /* Show fallback text until the font is ready */
13 font-display: swap;
14 }
15
16 /* 3️⃣ Use it */
17 body {
18 font-family: 'Inter Variable', system-ui, sans-serif;
19 }
20</style>Beneficios: control total sobre el almacenamiento en caché, las licencias y los subconjuntos; funciona sin conexión si agrupa los archivos.
Googlefonts CSSAPI (la API de fuentes públicas más común)
1<link href="https://fonts.googleapis.com/css2?
2family=Roboto:wght@400;700&
3family=Open+Sans:ital,wght@0,400;0,600;1,400&
4display=swap"
5rel="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 OpenSans. |
display=swap | Usa texto de respaldo hasta que las fuentes terminen de cargarse (recomendado para la experiencia de usuario). |
Luego en CSS:
1h1 { font-family: 'Roboto', sans-serif; }
2p { 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 (Googlefonts)
1<link href="https://fonts.googleapis.com/css2?
2family=Inter:wght@200..800&display=swap"
3rel="stylesheet">
4
5<style>
6 .hero {
7 font-family: 'Inter', system-ui;
8 /* Animate weight from thin → bold */
9 font-variation-settings: 'wght' 200;
10 transition: font-variation-settings .6s ease;
11 }
12 .hero:hover { font-variation-settings: 'wght' 800; }
13</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.
1// Create a FontFace object
2const myFont = new FontFace(
3 'Custom Serif',
4 'url(/fonts/CustomSerif-VF.woff2) format("woff2")',
5 { weight: '400 900', style: 'normal' } // optional descriptors
6);
7
8// Add it to the document’s FontFaceSet
9document.fonts.add(myFont);
10
11// Start loading
12myFont.load().then(() => {
13 // Font ready → apply it
14 document.body.style.fontFamily = '"Custom Serif", serif';
15}).catch(err => console.error('Font failed', err));También puedes consultar qué fuentes están cargadas:
1document.fonts.ready.then(() => console.log('All fonts ready'));AdobeFonts (Typekit): otra API de fuentes públicas
1<link rel="stylesheet" href="https://use.typekit.net/xyz123.css">Luego haga referencia a las familias exactamente como se enumeran en el kit:
1h2 { font-family: "adobe-caslon-pro", serif; }Diferencias clave frente a Googlefonts
- 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
El subconjunto solo necesita glifos: use el parámetro
unicode-rangeotext=de Google Fonts.Aproveche la
precargapara fuentes críticas:
1<link rel="preload" href="/fonts/Inter-Variable.woff2"
2 as="font" type="font/woff2" crossorigin>Establezca
font-displayal menos enswap.
Evite “bloquear” la representación de texto, lo que perjudica a CLS (Cumulative Layout Shift).Combine familias en una sola solicitud cuando utilice GoogleFonts o AdobeFonts.
Caché para siempre: la mayoría de las CDN envían encabezados
Cache‑Controlde 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 |
| API CSS de Google Fonts | <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
1<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
2 rel="stylesheet">
3<style>
4 body {font-family:'Montserrat',Arial,sans-serif;}
5</style>✅ Carga solo texto regular y en negrita → descarga mínima. ✅
display=swapgarantiza 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 peinado!