如何正确预加载谷歌字体

问题描述

如何正确预加载谷歌字体，而不在控制台中发出警告？

这是我的代码：

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;700&family=Open+Sans:wght@100;400;700&display=swap"
          rel="preload" as="style" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;700&family=Open+Sans:wght@100;400;700&display=swap"
          rel="stylesheet">

我已经为预加载链接添加了crossorigin属性，但警告仍然存在

解决方法

只需在主样式表中添加 crossorigin 属性

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;700&family=Open+Sans:wght@100;400;700&display=swap"
          rel="preload" as="style" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;600;700&family=Open+Sans:wght@100;400;700&display=swap"
          rel="stylesheet" crossorigin="anonymous">

google-fonts preloading