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>
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
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"]
}
});
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 "]
}
});