使用 JavaScript 优化 Google 字体

一个漂亮的网站还需要一套好的字体。您可以使用 Google Font 来获取您喜欢的字体集。不过，这或多或少影响了网站的加载速度，同时也降低了内部性能得分 PageSpeed 见解.

有很多关于如何使用属性优化 Google Font 的文章 font-display: swap。但它仅修复了“webfont load”错误，并没有提高性能分数。

在本文中，我将向您展示如何使用 JavaScript 优化 Google 字体，以便您可以自由地为您的网站选择字体，而不必再担心速度。

选择谷歌字体

要选择字体，您需要访问 谷歌字体.

作为我的示例，字体“Montserrat”有 2 种字体大小“400”和“700”。

您还可以选择许多其他字体样式并将它们导入到单个 URL 中。

使用 JavaScript 优化 Google 字体

有两种下载 Google 默认字体的方法。

<!-- 1. <link> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

<!-- 2. @import -->
<style>
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
</style>

尽管Google Font已经添加了属性 font-display: swap。但在 PageSpeed Insights 上测试性能时，我仍然遇到与 FCP（First Contentful Paint）和 LCP（Largest Contentful Paint）相关的错误。

为了解决这个问题，我将使用 JavaScript 代码加载 Google Font，并将其放置在页面底部（页脚）。

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const script_font = document.createElement('link');
        script_font.href = 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap';
        script_font.setAttribute('rel', 'stylesheet');
        document.body.appendChild(script_font);
    });
</script>

在行 script_font.href 请从项目中获取 url @import 谷歌提供的。

更改这种加载字体的方式后，检查您的网站速度是否有所改善。