Preload font-awesome

后端 未结 4 1288
野的像风
野的像风 2021-02-05 10:13

I am trying to pre-load font-awesome to improve my page load times:



        
相关标签:
4条回答
  • 2021-02-05 11:04

    You must add the crossorigin attribute when preloading fonts.

        <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
        <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
    
    0 讨论(0)
  • 2021-02-05 11:07

    Try using this method:

    <style>
    @font-face {
          font-family: 'FontAwesome-swap';
          font-display: swap;
          src: local('FontAwesome'), url(https:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0) format('woff2');
        }
    </style>
    
    0 讨论(0)
  • 2021-02-05 11:09

    It can be loading it twice because of the order you are doing preload.

    <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>
    <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>
    

    Preload the font first so that, css @font-face does not send a request again to load it.

    0 讨论(0)
  • 2021-02-05 11:15

    Along with marking a link as a preload stylesheet with rel="preload" (what you already did), we also need to use JavaScript to toggle the rel attribute to stylesheet when the file loads:

    <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" onload="this.rel='stylesheet'"/>
    <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

    0 讨论(0)
提交回复
热议问题