Preload key requests LightHouse

Question

I am using font-awesome for icons in angular app. I checked my web result in pagespeed. I getting an issue with fonts.

Here is pagespeed result.

its said use <link rel=preload> but the problem is that ..fonts/fontawesome-webfont.woff?v=4.7.0 is available in FontAwesome's css file, So how can i add preload for this? or there is any solution for fix it?

Here is my index.html where i included font-awesome cdn.

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" crossorigin />

I think Here is the problem in css.

@font-face {
    font-family: 'FontAwesome';
    src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Answer 1

There are 3 ways to accomplish this.

1. Use it in local. You know the rest.

2. Tell browser that "I am going to call these files shortly, be prepared."

Use preconnect. (https://developers.google.com/web/fundamentals/performance/resource-prioritization?hl=en#preconnect)

Make sure you use as="font".

<link rel="preconnect" as="font"
href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0" type="font/eot"
crossorigin />

3. Tell browser that "I want you to fetch them asap."

   <link rel="preload" as="font" href="https//maxcdn.bootstrapcdn.com/assets/fonts/fontawesome-webfont.eot?v=4.7.0" type="font/eot" crossorigin="anonymous">

For point 2 and 3, replicate the same for woff and woff2. Declare correct mime types in type.