你可以预加载任何样式（包括google字体）

<link
    rel="preload"
    href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
    as="style"
    onload="this.onload=null;this.rel='stylesheet'"
/>
<noscript>
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
        rel="stylesheet"
        type="text/css"
    />
</noscript>

您可以在www.example.com上阅读更多信息web.dev

更新

基于Lucas Vazquez注解，我还添加了&display=swap（它修复了"Ensure text remains visible during webfont load"的这个问题）

你的问题归结为如何异步地包含不太重要的CSS。我推荐阅读这篇article。
它类似于Claudiu的answer，但是，本文建议不要使用preload，因为：
首先，浏览器对preload的支持还不是很好，所以如果你想依靠polyfill（比如loadCSS提供的）来获取和应用一个跨浏览器的样式表，那么polyfill是必要的，更重要的是，preload会很早地获取文件，具有最高的优先级，可能会降低其他重要下载的优先级，这可能比你实际需要的非关键CSS的优先级要高
以下是替代方案：

<link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
    media="print"
    onload="this.media='all'"
/>
<noscript>
    <link
        href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"
        rel="stylesheet"
        type="text/css"
    />
</noscript>

这是它的工作原理。属性media=print将跳过页面渲染的css。一旦页面加载，它将加载打印css。onload JS事件将media更改为all，现在字体将被加载并更改页面渲染。最重要的是，字体将不再阻止页面渲染。
对于用户禁用js的极端情况，“noscript”标记将直接加载字体。

你可以像这样利用onload属性-

<link 
  href="https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap" 
  rel="stylesheet" 
  type="text/css"
  media="print"
  onload="this.media='all'" 
/>

首先将media属性设置为print，但在触发下载回调时将其更改为all。

我注意到Laravel最近在其html head输出中添加了以下标记：

<link rel="preconnect" href="https://fonts.gstatic.com">

我复制它，并添加它之前，我的字体请求，即：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" id="google-fonts-css">

这个简单的标签让我的移动的页面速度得分从80上升到95，但我不能完全确定这是不是我得分上升的原因--页面速度是不可预测的。我不确定这是Chrome的东西还是一个新标准。

在我的例子中，我会使用font-face generator tool来生成字体，这更容易使用，也更少麻烦，但当我使用谷歌字体时，这就是我所做的。你可以在body的末尾使用style元素，就在</body>结束标记之前：

<style>
@import "//fonts.googleapis.com/css?family=Lato:300,400,700"
</style>

也可以引用How to keep CSS from render-blocking my website?

必须在加载此JS文件之前加载以下字体文件：
https://electronicsportsitalia.it/wp-content/plugins/google-analytics-for-wordpress/assets/js/frontend.min.js

https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2
https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2   
https://fonts.googleapis.com/css?family=Lato
https://fonts.gstatic.com/s/roboto/v18/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2
https://fonts.gstatic.com/s/lato/v14/EsvMC5un3kjyUhB9ZEPPwg.woff2