2025-07-02 · Redacción Baduno · 9 blog.readMin · Blog & Conocimiento
Webfonts para 24 idiomas: selección de fuentes, subconjuntos, rendimiento
¿Una fuente que soporte alemán, griego, maltés y árabe? Es raro – y si existe, es pesada. Estrategias para un multilingüismo rápido y hermoso.
El problema de cobertura
Latín con todos los diacríticos de la UE, griego, cirílico, además de escritura árabe: casi ninguna familia tipográfica lo cubre todo bien. La solución pragmática son pares de fuentes – una familia latín/griego/cirílico más una fuente RTL especializada, ajustadas entre sí en densidad y altura.
El subconjunto ahorra drásticamente
Las fuentes Unicode completas pesan cientos de kilobytes. Los subconjuntos por sistema de escritura – cargados solo donde se necesitan – los reducen a fracciones: la versión RTL carga la fuente RTL, la alemana no.
Carga sin saltos
font-display:swap muestra texto inmediatamente con fuente del sistema y luego intercambia – contra saltos de diseño ayudan fallbacks métricamente compatibles y size-adjust. Alojado localmente en lugar de CDN externo: más rápido y respetuoso con la privacidad.
Tipografía por sistema de escritura
La escritura árabe necesita más interlineado y a menudo un punto más de tamaño; el espaciado de mayúsculas solo funciona en latín. Un sistema de diseño que conoce tales reglas por sistema de escritura convierte 24 idiomas en un solo diseño – en lugar de 25 compromisos.
Variable Fonts: Flexibilidad con obstáculos
Las fuentes variables prometen reducir la cantidad de archivos al agrupar varios estilos (negrita, cursiva, etc.) en un solo archivo. Para sitios multilingües con 24 idiomas, esto resulta tentador: en lugar de 24 × 4 = 96 archivos estáticos, ¿solo 24 variables? Pero cuidado: las fuentes variables con amplia cobertura de idiomas (latín, griego, cirílico, árabe) son escasas y a menudo grandes. Además, el subsetting se vuelve más complejo, ya que los ejes de variación afectan el conjunto de caracteres. Una fuente variable subseateada puede requerir diferentes glifos según la configuración de los ejes, por lo que deberá mantener todos los subconjuntos o generarlos dinámicamente. Es práctico usar fuentes variables para una familia de sistemas de escritura (p. ej., latín + griego) y fuentes estáticas para la otra (p. ej., árabe), para controlar el tamaño de los archivos. Cargue las fuentes variables mediante font-weight: 100 900 y font-stretch: 75% 125%, en lugar de estilos individuales; pero pruebe la representación en todos los idiomas y navegadores, ya que las fuentes variables a veces producen resultados inesperados al subseatear y rasterizar.
Uso de fuentes conforme a licencia en 24 idiomas
El aspecto legal a menudo se subestima. Una licencia de fuente generalmente cubre un número determinado de visitas a la página web o un dominio; con 24 variantes de idioma, puede encontrar limitaciones según la licencia. Algunos proveedores prohíben explícitamente el subsetting o la incrustación en contenido dinámico. Asegúrese de que la licencia cubra todos los idiomas; en particular, caracteres especiales como la İ turca, la Ș rumana o la Ħ maltesa suelen considerarse un conjunto de caracteres extendido y no siempre están incluidos en el paquete estándar. Para proyectos de la UE, se recomienda una licencia Unlimited o Enterprise que permita el subsetting y el uso en múltiples dominios. Verifique también que la licencia de la fuente sea válida para la tecnología de fuente que utiliza (p. ej., WOFF2). Una herramienta de asesoramiento sobre licencias (p. ej., de Fontstand) puede ayudar a evitar conflictos; anote las condiciones de licencia por tipo de letra en su guía de estilo para no tener que hacer ajustes posteriores.
Competencia de formatos: WOFF2, fuentes variables subseteadas y rango Unicode
La elección del formato de archivo afecta el tiempo de carga y la compatibilidad. WOFF2 es el estándar actual y ofrece una compresión entre un 30 y un 50 % mejor que WOFF. Si utiliza fuentes variables, debe comprobar si su navegador de destino admite WOFF2 con ejes variables (actualmente todos los navegadores modernos). Para navegadores antiguos (IE11), debe tener archivos WOFF estáticos como respaldo. Un truco eficaz: use Unicode-Range en @font-face para cargar solo el conjunto de caracteres realmente necesario, similar al subsetting, pero controlado desde el servidor. Combine esto con font-display: swap; puede optimizar la carga mediante preload para variantes de fuente críticas (p. ej., fuente base para latín). Un ejemplo práctico: para la página en alemán, cargue solo el subconjunto latín+diéresis (aproximadamente 30 KB); para la página en griego, el subconjunto latín+griego (aproximadamente 50 KB); para la página en árabe, el subconjunto latín+árabe (aproximadamente 80 KB). De esta manera, incluso con 24 idiomas, las descargas totales por visitante se mantienen por debajo de 100 KB de datos de fuente.
¿Una fuente que soporte alemán, griego, maltés y árabe? Es raro – y si existe, es pesada. Estrategias para un multilingüismo rápido y hermoso.
Aseguramiento automático de la calidad de la representación tipográfica
Para que en las 24 variantes lingüísticas no falten glifos ni parezcan fragmentados, debe incorporar pruebas automatizadas en su canal de CI/CD. Herramientas como FontProof, Wakamai Fondue o el script Python fontdiff comparan capturas de pantalla renderizadas de cada versión de idioma con una captura de referencia. O puede usar Puppeteer para abrir cada página, cargar la fuente y comprobar si hay espacios (mediante la propiedad CSS font-family: …; font-unicode-range). De forma más sistemática: extraiga todos los puntos de código Unicode que aparecen en el HTML por versión de idioma y compárelos con los glifos presentes en el subconjunto. Si falta un carácter, se interrumpe la compilación o se emite una advertencia. Estas pruebas también deberían verificar la legibilidad de las ligaduras o caracteres alternativos (p. ej., formas iniciales árabes). Integre además una verificación de presupuesto de rendimiento: el tamaño de fuente por idioma no debe superar un determinado umbral. De esta manera se asegura de que el multilingüismo no vaya en detrimento del tiempo de carga.
Subconjunto asistido por IA: eficiencia mediante automatización con garantía de calidad
Gestionar manualmente el subconjunto para 24 idiomas es laborioso y propenso a errores. Las herramientas de compilación modernas como glyphhanger o HarfBuzz pueden generar subconjuntos automáticamente basándose en los caracteres que realmente aparecen en el contenido. El proceso se vuelve aún más eficiente si se utilizan modelos de IA que predicen los bloques Unicode necesarios a partir de las versiones lingüísticas. Una red neuronal, entrenada con sitios web multilingües, puede determinar con gran precisión qué glifos son necesarios para un idioma específico, desde caracteres latinos básicos hasta suplementos cirílicos o ligaduras árabes. El subconjunto generado automáticamente se somete a una revisión manual por parte de un hablante nativo para garantizar que no falten caracteres raros pero importantes (por ejemplo, citas históricas, caracteres especiales en nombres de empresas). Esta combinación de aceleración mediante IA y control humano reduce la creación de subconjuntos de días a horas, manteniendo una calidad constantemente alta. Integre el script en su canal de CI/CD para que los subconjuntos se regeneren y prueben automáticamente con cada actualización de contenido. Así se asegura de que los archivos de fuentes estén siempre actualizados sin afectar el rendimiento de carga.
Estrategias de fallback específicas por idioma para una tipografía consistente
Incluso con un subconjunto óptimo, puede ocurrir que un archivo de fuente no se cargue, ya sea por errores de red, incompatibilidad del navegador o restricciones de licencia. En ese caso, entra en juego la pila de fallback. Para 24 idiomas, una pila de fuentes global no es suficiente: una fuente del sistema que se vea bien para alemán puede no ser adecuada para árabe. Por lo tanto, defina pilas de fallback separadas para cada versión de idioma, adaptadas a las fuentes del sistema típicas de la región de destino. Para ello, use la función CSS @font-face con unicode-range para cargar solo los caracteres realmente necesarios para cada familia tipográfica. Para la versión árabe, podría especificar como fallback 'Traditional Arabic' o 'Tahoma'; para la griega, 'GFS Didot' o 'Times New Roman'. Preste atención a la compatibilidad métrica: con size-adjust y ascent-override, ajuste visualmente la fuente de fallback a la fuente principal para minimizar los saltos de diseño. Pruebe estos fallbacks en todos los idiomas con una comparación automatizada de capturas de pantalla para garantizar que la legibilidad se mantenga incluso en caso de error. Así evitará sorpresas y conseguirá una experiencia de usuario coherente en todas las variantes lingüísticas.
Optimización del lado del servidor: autohospedaje, almacenamiento en caché y estrategias CDN
La entrega de fuentes web a través de servicios externos como Google Fonts o Adobe Fonts es cómoda, pero presenta desventajas para proyectos multilingües: primero, con 24 variantes de idioma a menudo es necesario realizar varias solicitudes a diferentes servidores, lo que aumenta el tiempo de carga. Segundo, no se conoce la estrategia de almacenamiento en caché del proveedor y no se tiene control sobre tiempos de inactividad o privacidad de datos. Por ello, recomendamos el autohospedaje de todos los archivos de fuentes en su propio servidor o en una CDN dedicada. Mediante el autohospedaje, puede ajustar los subconjuntos de fuentes exactamente a sus versiones de idioma y priorizar fuentes críticas con HTTP/2 Server Push o Preload Hints. Además, se puede controlar el almacenamiento en caché mediante cabeceras Cache-Control para que las fuentes se carguen solo una vez para todos los visitantes de una versión de idioma. Una CDN con servidores periféricos cerca de sus usuarios reduce la latencia. Para 24 idiomas con diferentes regiones de destino, una CDN es esencial: los usuarios en Finlandia cargan el subconjunto de fuentes finlandés desde un nodo periférico cercano, los usuarios en Malta desde otro. Importante: configure una regla de caché independiente para cada versión de idioma, de modo que, por ejemplo, el archivo de subconjunto alemán se almacene en caché con una validez larga (por ejemplo, un año), mientras que en las actualizaciones de fuentes invalide la caché cambiando el nombre del archivo (fingerprinting). Así se asegura de que las fuentes se entreguen rápidamente y estén siempre actualizadas, sin que los usuarios tengan que esperar por actualizaciones.
Accesibilidad y legibilidad: selección de tipografía para todos los grupos de usuarios
La multilingüidad no solo implica representar correctamente los caracteres, sino también que la fuente sea legible para todos los usuarios, independientemente de su capacidad visual, tamaño de pantalla o dispositivo. Por lo tanto, al elegir una fuente, asegúrese de que los caracteres sean suficientemente distinguibles, especialmente en pares similares como 'rn' vs. 'm' o '0' vs. 'O'. Para escrituras latinas, son adecuadas las fuentes sans-serif con gran altura de x y formas abiertas; para escrituras árabes, son importantes las fuentes con conexiones claras y suficiente espacio interior. Asegúrese de que la fuente no se deshilache ni altere los espaciados al ampliarla al 200%. Utilice en CSS font-size-adjust: from-font o establezca fuentes de respaldo explícitas con proporciones similares para evitar saltos de diseño al hacer zoom. Otro aspecto es el nivel de contraste: el texto sobre el fondo debe cumplir al menos WCAG-AA (4,5:1), y para texto pequeño mejor AAA (7:1). Para 24 idiomas, esto significa probar cada versión de idioma con un comprobador de contraste, ya que algunas fuentes pierden contraste con ciertos grosores de trazo o en cursivas. También es necesario ajustar la longitud de línea y el interlineado según el idioma: los textos en árabe suelen necesitar más altura de línea que los latinos. Integre estas pruebas en su aseguramiento de calidad automatizado (véase la sección 4) para garantizar que todos los usuarios —incluyendo personas mayores o con discapacidad visual— puedan captar sus contenidos de manera óptima.
blog.faqT
¿Puedo usar Google Fonts para sitios multilingües de la UE?
Técnicamente sí, pero es problemático desde el punto de vista de protección de datos, ya que Google registra las direcciones IP de los visitantes. Para sitios de la UE, se recomienda una fuente autoalojada. Además, Google Fonts ofrece una selección limitada de tipografías multilingües; sería necesario combinar varias familias, lo que aumenta la carga.
¿Cómo verifico que mi fuente cubre todos los glifos necesarios?
Utilice herramientas como GlyphChecker o la prueba de rango Unicode de Wakamai Fondue. Introduzca los caracteres de sus idiomas de destino (p. ej., İ turca, Ș rumana). Alternativamente, analice su sistema de gestión de contenidos y extraiga todos los puntos de código Unicode por página de idioma para compararlos con la fuente. Así descubrirá las carencias antes del lanzamiento.
