Introducción
Trabajar con fuentes personalizadas en proyectos web puede ser complicado, especialmente cuando trabajas en proyectos modulares como los componentes aislados de Blazor. En esta entrada, te contaré cómo resolví un problema específico relacionado con la carga de fuentes en un archivo de CSS aislado, y te mostraré paso a paso lo que aprendí durante el proceso.
Este blog está dirigido a principiantes y aquellos que no tienen mucha experiencia en programación, así que ¡no te preocupes si algunos conceptos te suenan nuevos! Vamos a explicarlo todo con claridad.
El Problema
Tenía la necesidad de usar una fuente específica, llamada Figtree, en uno de mis componentes de Blazor, pero quería que esta fuente solo se aplicara dentro de ese componente aislado, sin afectar al resto del proyecto. En Blazor, puedes usar CSS aislado para asegurarte de que los estilos solo afecten al componente en el que están definidos.
Al principio, intenté hacer lo que normalmente harías en un archivo CSS estándar: usar la regla @import para importar la fuente desde Google Fonts. Este es un método común para traer fuentes externas:
/* Mi primer intento */
@import url('https://fonts.googleapis.com/css2?family=Figtree&display=swap');
Primer Intento: Error con @import
Pronto me di cuenta de que este enfoque no funcionaba en CSS aislado de Blazor. Me encontré con el siguiente error:
@import rules are not supported within scoped CSS files because the loading order would be undefined.
Este mensaje indicaba que no es posible usar @import dentro de archivos CSS aislados en Blazor. Esto se debe a que el orden de carga no se puede garantizar en este tipo de archivos.
Solución Alternativa: Usar @font-face
Al no poder usar @import, probé con otro enfoque: definir las fuentes directamente usando la regla @font-face. Esta es una regla de CSS que permite especificar fuentes externas (como las de Google Fonts) de manera más explícita.
La idea es definir dónde se encuentran los archivos de la fuente y cómo deberían ser aplicados (por ejemplo, el tamaño y el peso).
Intenté hacerlo así:
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
src: url('https://fonts.googleapis.com/css2?family=Figtree&display=swap');
}El Error de Decodificación
Cuando probé este código, no obtuve ningún error al cargar la página, pero la fuente no se mostraba correctamente. Al abrir la consola del navegador, vi un mensaje de error como este:
Failed to decode downloaded font: https://fonts.googleapis.com/css2?family=Figtree&display=swap
OTS parsing error: invalid sfntVersion
Investigación y Nuevos Intentos
El error de "invalid sfntVersion" estaba relacionado con cómo se estaba descargando la fuente. Parecía que el navegador no podía interpretar correctamente el formato del archivo de la fuente que estaba intentando usar desde Google Fonts.
Buscando una solución, descubrí que Blazor no manejaba bien la descarga directa de las fuentes de Google Fonts usando la URL. Esto me llevó a explorar otras opciones, como descargar los archivos de las fuentes localmente y cargarlos en el proyecto.
Solución Final: Descargar los Archivos Correctos
Finalmente, después de varias pruebas fallidas, encontré la solución al acceder al enlace generado por Google Fonts:
1. Visité el enlace de la fuente Figtree que me daba Google Fonts: https://fonts.googleapis.com/css2?family=Figtree.
2. Al abrir el enlace en una nueva ventana, pude ver el archivo CSS que contenía los enlaces correctos a los archivos .woff2 de las fuentes.
3. Copié el contenido de ese archivo y lo pegué directamente en mi CSS aislado.
Aquí está el código final que funcionó:
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/figtree/v5/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_d_QG5XyEAk4A.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Figtree';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/figtree/v5/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_eYR25XyEAk4A.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}Con este código, pude cargar las fuentes Figtree correctamente dentro de mi componente de CSS aislado en Blazor, sin necesidad de manejar manualmente los archivos de fuente.
Explicando el Código
@font-face: Esta es la regla que nos permite definir fuentes personalizadas. En este caso, estamos declarando dos variaciones de la fuente Figtree: una con peso 400 (normal) y otra con peso 700 (negrita).
font-display: swap: Esto le indica al navegador que, si la fuente personalizada no se carga de inmediato, use una fuente de respaldo mientras tanto. De este modo, el texto sigue siendo visible, lo que mejora la experiencia del usuario.
src: Aquí especificamos la URL directa a los archivos .woff2, que son archivos de fuente optimizados para la web.
¿Por Qué Funciona?
El archivo CSS que obtuve del enlace directo de Google Fonts contenía los enlaces a las versiones .woff2 de la fuente, que es un formato optimizado para la web. En lugar de depender de la URL original de Google Fonts, utilicé estos enlaces directos en el CSS aislado, lo que permitió que la fuente se cargara correctamente en mi componente sin errores.
Además, usé la regla font-display: swap;, que mejora el rendimiento de carga de la fuente al mostrar una fuente predeterminada mientras la fuente personalizada se descarga.
Conclusión
Este proceso me enseñó mucho sobre cómo Blazor maneja las fuentes y el CSS aislado. Si bien el uso de fuentes externas como Google Fonts puede parecer sencillo, cuando trabajas con CSS aislado, se deben tener en cuenta las limitaciones y cómo manejar adecuadamente la carga de fuentes.
Espero que mi experiencia te ayude a resolver problemas similares si te encuentras trabajando con Blazor y fuentes personalizadas. ¡No dudes en probar diferentes enfoques y seguir investigando hasta encontrar la solución que mejor funcione para tu proyecto!