¿Deberíamos incluir las fuentes en el archivo index.html con rel="preload" como el siguiente código o podemos configurar esto en Angular CLI para precargar todas las fuentes requeridas?
Por favor, sugiéreme una mejor solución, ya que puedo ver que toma un tiempo de carga de página de varios segundos sugerido en Google Analysis.
<link rel="preload" href="./assets/fonts/Lato/Lato-Semibold.woff2" as="font" crossorigin> <link rel="preload" href="./assets/fonts/Lato/Lato-Black.woff2" as="font" crossorigin> <link rel="preload" href="./assets/fonts/Lato/Lato-Bold.woff2" as="font" crossorigin> <link rel="preload" href="./assets/fonts/Lato/Lato-Heavy.woff2" as="font" crossorigin> <link rel="preload" href="./assets/fonts/Lato/Lato-Medium.woff2" as="font" crossorigin> <link rel="preload" href="./assets/fonts/Lato/Lato-Regular.woff2" as="font" crossorigin>Ejemplo::
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2family=Merriweather&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2family=Merriweather&display=swap" media="print" onload="this.media='all'" /> <noscript> <link rel="stylesheet" href="https://fonts.googleapis.com/css2family=Merriweather&display=swap" /> </noscript>Para su referencia: enlace a la explicación de Harry Roberts sobre la carga de fuentes
Para esta implementación en angular, debe usar la dependencia de terceros para cargar las fuentes.
usar webfontloader
npm y webfontloader
Después de eso, cargue su fuente personalizada como esta
WebFont.load({ custom: { families: [""Lato"] } });Para esta implementación en angular, debe usar la dependencia de terceros para cargar las fuentes. Encuentre contenido confiable y centralizado y colabore en torno a las tecnologías que más usa. Conéctese y comparta conocimientos en una sola ubicación estructurada y fácil de buscar. Después de eso, cargue su fuente personalizada como esta
WebFont.load({ custom: { families: ["" Lato "] } });