16

Should we include the fonts in index.html file with rel="preload" like the below code or can we configure this in Angular CLI to preload all the fonts required?
Please suggest me a better solution as I can see it takes multi-second page load time suggested in 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>
Hossein Mousavi
  • 3,118
  • 3
  • 16
  • 35
ABHILASH SB
  • 2,122
  • 2
  • 21
  • 31
  • 1
    check these url, you might get help. https://stackoverflow.com/questions/1330825/preloading-font-face-fonts https://stackoverflow.com/questions/42616709/preloading-fonts-in-chrome-with-preload-link-directive – Piyush Jain Jan 13 '20 at 04:53
  • Does this answer your question? [Preloading @font-face fonts?](https://stackoverflow.com/questions/1330825/preloading-font-face-fonts) – Hossein Mousavi Feb 06 '21 at 08:44
  • 1
    the closer to standard HTML you can get: do that one, even if the framework you're using has its own bespoke way of doing things. Because unless those bespoke solutions compile down to "plain HTML", the plain HTML solution is always the best solution. – Mike 'Pomax' Kamermans Dec 12 '21 at 00:28

3 Answers3

0
  1. Preconnect to the font file origin.
  2. Preload the font stylesheet asynchronously with low priority.
  3. Asynchronously load the font stylesheet and font file after the content has been rendered with JavaScript.
  4. Provide a fallback font for users with JavaScript turned off.

Example::

<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>

For your reference : Link to Harry Roberts explanation on fonts loading

Pushpinder Singh
  • 71
  • 1
  • 5
-1

For this implementation in angular, you should use third-party dependency to load the fonts.

use webfontloader

npm i webfontloader

After that load your custom font like this

 WebFont.load({
  custom: {
    families: [""Lato"]
  }
 });
Raheem Mohamed
  • 789
  • 3
  • 6
  • 15
-1

For this implementation in angular, you should use third-party dependency to load the fonts.,Find centralized, trusted content and collaborate around the technologies you use most.,Connect and share knowledge within a single location that is structured and easy to search. After that load your custom font like this

   WebFont.load({
              custom: {
                 families: [""
                    Lato "]
                 }
              });
Mahima Sachdeva
  • 1
  • 2
    Please read [this article](https://stackoverflow.com/help/how-to-answer) to improve your answers? – Sercan Dec 16 '21 at 15:41