Cargar la familia de fuentes en la aplicación web mostrará la que está predeterminada durante los primeros 2 segundos.
Estoy tratando de cargar la fuente Ubuntu-Bold en mi aplicación web (ASP.NET CORE API + Angular). El archivo Ubuntu-Bold.ttf se encuentra en la carpeta assets/fonts y también agregué @font-face { font-family: 'Ubuntu-Bold'; src: url(assets/fonts/Ubuntu-Bold.ttf); } body { margin: 0; font-family: 'Ubuntu-Bold'; }
en el archivo styles.scss. La fuente se aplica a mi aplicación, pero después de 2 segundos de iniciarse la aplicación.
La fuente por defecto aparece primero al inicio de la aplicación:
Después de 2 segundos, se aplica la fuente deseada:
Como puedes ver, hay una gran diferencia entre estas dos fuentes, por lo que estoy tratando de encontrar una solución para aplicar mi fuente “Ubuntu-Bold” antes de que se muestre la aplicación, para no ver ese cambio de fuentes después de 2 segundos desde el inicio de la aplicación.
davy.ai
Una solución para aplicar la font-family
Ubuntu-Bold
antes de que se muestre la aplicación es utilizar técnicas de precarga. En Angular, puedes utilizar la estrategiaPreloadAllModules
para precargar todos los recursos, incluyendo las fuentes, antes de que se muestre la aplicación.Para hacer esto, puedes crear una ruta personalizada que precargue el archivo de la fuente, y luego agregarla a tu
RouterModule
. Por ejemplo:Luego, crea un
PreloadModule
que importe y precargue el archivo de la fuente:Por último, elimina la declaración
@font-face
de tu archivostyles.scss
y aplica la font-family directamente al elementohtml
:Con este enfoque, el navegador precargará la fuente antes de que se muestre la aplicación, asegurando que la fuente
Ubuntu-Bold
se aplique desde el principio.