合并 Google 字体请求不起作用答案

【问题标题】：Combining Google Fonts requests not working合并 Google 字体请求不起作用
【发布时间】：2021-04-01 12:33:28
【问题描述】：

我正在开发一个需要加载两种 Google 字体的网站。为了使事情尽可能高效地进行，我想将两种字体的加载合并到一个请求中。我以前从来没有遇到过这个问题。谷歌生成路径，我总是能够将它复制到我的 functions.php 文件中并在那里注册。但是，这次做同样的事情是行不通的。字符串的语法现在看起来也有点不同了。曾经有一个竖线字符 (|) 分隔 Google 生成的路径中的两种字体，但现在没有了。如果我将每种字体分成自己的请求，一切正常。

下面提供的第一个 sn-p 是我尝试使用 Google 提供的链接注册我的字体的方式，该链接将两种字体合并到一个请求中。

function load_google_fonts() {
wp_register_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700' );
wp_enqueue_style( 'my-google-fonts' ); }
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );

我也试过放置一个'|'在该字符串中的“family”和“Open”之间，因为我知道这就是一个请求中的两种字体过去是如何分开的。那里也没有运气。

下一个 sn-p 是我正确加载字体的唯一方法，即将它们拆分为多个请求。

function load_google_fonts() {
wp_register_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700' );
wp_register_style( 'my-google-fonts-2', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700' );
wp_enqueue_style( 'my-google-fonts' );
wp_enqueue_style( 'my-google-fonts-2' );
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );

Google 为我提供的组合链接有问题吗？如果是这样，需要改变什么？如果没有，我做错了什么？有没有其他人遇到过这个问题？任何帮助将不胜感激。

【问题讨论】：

你的第一个例子对我来说似乎很好。他们似乎都在那里？ fonts.googleapis.com/…在这里阅读文档developers.google.com/fonts/docs/css2

标签： php wordpress fonts google-webfonts

【解决方案1】：

编辑：

自上次 Google 字体更新以来，您需要使用以下行：

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

在 Google 字体上选择所需字体后，这是他们提供给我们的嵌入 sn-p：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap" rel="stylesheet">

您当前正在使用网址栏中的默认 Google 字体网址加载您的字体。两者都不相同（请参阅下面的正确广告错误）。

Right = https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap.
Wrong = ~~https://fonts.google.com/specimen/Maven+Pro?query=Maven&sidebar.open=true&selection.family=Maven+Pro:wght@400;700|Open+Sans:wght@300;700.~~

在 Google 字体网站上选择字体后，正确的代码 sn-p 将出现在右侧栏中。

从function.php 文件加载scripts、stylesheets 和fonts 是最佳做法。

当然，我们必须将 Google Font 提供的代码 sn-p 适配到我们的 Wordpress 环境中。

<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

    /**
    * Register then enqueue google fonts
    */
    wp_register_style( 'google_fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap' );
    wp_enqueue_style( 'google_fonts' );
  };
}; ?>

使用 CDN 时，您需要确保源可用。我们可以使用@fopen(); 来“测试”我们的网址并确保我们的 CDN 正常工作，如果没有，我们会返回托管在我们网站服务器上的后备文件。

<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

    /**
    * Register then enqueue google fonts
    *
    * Check if CDN's url is valid, if not return fallback
    */
    $test_google_fonts = @fopen( 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap', 'r' );
    if ( $test_google_fonts !== false ) {
      wp_register_style( 'google_fonts', '//fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap' );
    } else {
      wp_register_style( 'google_fonts', get_stylesheet_uri() . '/assets/font/_my_awesome_font_fallback_' );
    };
    wp_enqueue_style( 'google_fonts' );
  };
}; ?>

附带说明，如果您打算立即注册并入队脚本，则不需要同时执行这两项操作，您可以直接跳到入队部分。

<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

  /**
  * Register then enqueue google fonts
  */
  wp_enqueue_style( 'google_fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Open+Sans:wght@300;700&display=swap' );
  };
}; ?>

【讨论】：

非常感谢您的回复。我不知道不需要先注册脚本，这很好知道。但是，我尝试了您提供的代码，但仍然遇到同样的问题。如果我错了，请纠正我，但看起来您所说的链接是正确的链接，而我在示例中的链接是相同的链接，除了末尾的“display=swap”，我以为不需要。我还缺少其他东西吗？也许还有另一个问题导致它？另外，我注意到当我在中加载组合链接时，字体加载得很好。
昨天在我的本地服务器上工作了！ display=swap 不是唯一的区别，请仔细看看。 <link rel="preconnect" href="https://fonts.gstatic.com"> 该行也是由 Google Fonts 提供的，因此可能是必需的，可能在您的 header.php 处。
另外，如果你使用像 Bootstrap 这样的框架，可能会发生冲突。使用!important css 声明确保您的字体应用到您的选择器。
我确实看到了预连接，只是不认为它是必需的，因为以前从未如此。但我会试一试。我也会尝试 !important 。感谢您的帮助！
预连接似乎是问题所在。将它添加到我的标题中，它突然起作用了。再次感谢！

【解决方案2】：

对于遇到此问题的任何其他人，问题是我没有将此 sn-p 添加到 header.php 内的 <head>。

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

这在以前不是必需的，我不确定现在为什么会这样，但这解决了我的问题。感谢@amarinediary 向我指出。

【讨论】：