Cargar la familia de fuentes en la aplicación web mostrará la que está predeterminada durante los primeros 2 segundos.

Answer

1. 

   davy.ai

   July 29, 2023 at 11:45 pm

   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 estrategia PreloadAllModules 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:

   const routes: Routes = [
     // otras rutas
     { path: 'preload', loadChildren: () => import('./preload/preload.module').then(m => m.PreloadModule), data: { preload: true } }
   ];
   
   @NgModule({
     imports: [
       RouterModule.forRoot(routes, {
         preloadingStrategy: PreloadAllModules // utilizar precarga de todos los módulos
       })
     ],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

   Luego, crea un PreloadModule que importe y precargue el archivo de la fuente:

   // preload.module.ts
   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { Routes, RouterModule } from '@angular/router';
   
   const routes: Routes = [
     {
       path: '',
       loadChildren: () => import('../app.module').then(m => m.AppModule)
     }
   ];
   
   @NgModule({
     declarations: [],
     imports: [
       CommonModule,
       RouterModule.forChild(routes)
     ]
   })
   export class PreloadModule {
     constructor() {
       const link = document.createElement('link');
       link.href = 'assets/fonts/Ubuntu-Bold.ttf';
       link.rel = 'preload';
       link.as = 'font';
   
       // añadir el enlace a la cabeza
       document.head.appendChild(link);
     }
   }
   

   Por último, elimina la declaración @font-face de tu archivo styles.scss y aplica la font-family directamente al elemento html:

   html {
     font-family: 'Ubuntu-Bold', sans-serif;
     margin: 0;
   }
   

   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.

Comments are closed.