组合 Google 字体请求无效

Question

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

下面提供的第一个片段是我如何尝试使用 link 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' 之间，据我所知，这就是一个请求中的两种字体过去的分隔方式。也没有运气。

下一个片段是我正确加载字体的唯一方法，即将它们分成多个请求。

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' );

link Google 提供给我的组合有什么问题吗？如果是这样，需要改变什么？如果不是，我做错了什么？以前有其他人运行遇到过这个问题吗？非常感谢任何帮助。

Answer 1

编辑：

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

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

在 Google 字体上选择所需的字体后，这是他们给我们的嵌入片段：

<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">

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

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 字体网站上选择字体后，正确的代码片段将出现在右侧栏中。

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

当然，我们必须根据我们的 Wordpress 环境调整 Google Font 给出的代码片段。

<?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(); 来“测试”我们的 url 并确保我们的 CDN 正常工作，否则我们 return 在我们的网站服务器上托管后备文件。

<?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' );
  };
}; ?>

Answer 2

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

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

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

组合 Google 字体请求无效

Combining Google Fonts requests not working

php

wordpress

fonts

google-webfonts

编辑：