Preload fonts in Angular?

Programming
, , , ,
1

Google Analysis is reporting a multi-second page load time. Is there a better solution than including the fonts in index.html with rel="preload" like the code below?

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

Can we configure fonts to be preloaded in Angular CLI for quicker page load time?

2

Yes, there is a better solution than including the fonts in index.html with rel="preload".

To configure fonts to be preloaded in Angular CLI for quicker page load time, you can make use of the Angular’s @angular/cli package.

First, install the package by running the following command in your Angular project directory:

npm install --save-dev @angular/cli

Once installed, you can configure font preloading in your Angular project by following these steps:

  1. Open the angular.json file in the root of your Angular project.
  2. Find the "assets" section in the file.
  3. Add the font files to the "assets" array like this:
"assets": [
  "src/favicon.ico",
  "src/assets",
  {
    "glob": "**/*",
    "input": "./node_modules/font-awesome/fonts",
    "output": "/assets/fonts/"
  }
]
  1. Save the angular.json file.

By configuring the font files in the "assets" section of angular.json, Angular CLI will automatically include them in the build process and optimize their loading for better page load time.