WordPress使用自定义字体如果要达到快速打开网站的要求，可以从以下几个方面进行改进：

  • 使用Webfont字体（.woff2格式）
  • 将字体托管在自己的服务器上并设置缓存
  • 只使用一款自定义字体以及少量的字体样式
  • 设置preload预加载
  • 使用无衬线字体 (sans-serif) 更易于阅读
  • 使用swap优先显示本地默认字体
  • 使用系统字体作为备选

1 提高字体加载性能的几种方法

1.1 使用Webfont字体（.woff2格式）

Webfont 是基于 TTF & OTF 等字体格式的封装和优化压缩，所以体积更小，加载速度更快，对于设备浏览器的兼容性更好，它的字体格式为 .woff2 和 .woff

WOFF (Web Open Font Format) 是专为 Web 开发而设计的字体格式。woff2 是 woff 的下一个版本，比 woff 有更好的压缩效果，速度更快，但兼容性方面目前还在推进中，所以它的兼容性没有 woff 好。

这里建议直接使用 woff2 一种格式即可，如果字体没有提供 woff2，则使用 woff，不必为了效果和兼容性加载多个格式文件，使用这种格式基本已经覆盖了网站大部分类型的用户，即超过 80% 的用户，剩下的 20% 使用其他的兼容性措施弥补即可。

CSS 的加载方式如下所示：

@font-face {
  font-family: MyWebfont;
  src: url('font/MyWebfont.woff2') format('woff2');
}

1.2 将字体托管在自己的服务器上并设置缓存

网站在设计完成后，字体修改的可能性极低，我们可以将字体托管到自己的服务器上，然后设置缓存时间为半年甚至一年。

1.3 只使用一款自定义字体及少量的字体样式

自定义字体的加载往往会对网页性能造成影响，原因是在加载字体前，需要先从服务器上将字体下载下来，然后浏览器拿着下载下来的字体进行页面的渲染。

所以为了不影响网站的打开速度，整站只建议有且只有一款自定义字体。每多一个字体加载，都会对页面加载速度造成一次冲击。比如，你在网站上同时加载了 Open Sans 和 Roboto 这两款字体，这种设置没有什么意义，不仅影响页面加载性能，同时还破坏网站字体的规范统一。

这里指的一款字体，不包含字体的不同样式，如粗体、斜体等。一般情况下，我们只建议加载两种样式，一种是常规的基础字体 (即正文字体)，一种是加粗的字体 (即标题) 即可。基于用户体验和设计效果的平衡进行取舍，没有太大的必要加载多个样式字体。

目前字体 font-weight 根据粗细程度分别有以下几种，但大部分字体都只有其中的几种粗细形式：

  • 100 – Thin
  • 200 – Extra Light
  • 300 – Light
  • 400 – Regular
  • 500 – Medium
  • 600 – Semi Bold
  • 700 – Bold
  • 800 – Extra Bold
  • 900 – Black

CSS 的设置如下：

@font-face {
  font-family: MyWebFont;
  src: url('font/MyWebfont-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: MyWebfont;
  src: url('font/MyWebfont-Bold.woff2') format('woff2');
  font-weight: 700;
}

1.4 设置 preload 预加载

为了使用网页加载最优化，我们可以设置字体资源加载的优先级。使用自定义字体时，应告知浏览器资源加载的优先级，使用相应的 rel="preload" 来预加载你最重要的资源 (不要滥用)，比如 image, css, jQuery, font 文件，使用这个属性，需同步配合使用 as 或者 type ，浏览器会根据你设置的资源类型来判断哪个资源优先级更高，preload 使用 as="style" 样式属性将获得加载的最高优先级。

使用方法是在 前面添加 preload 属性，代码如下所示：

<link rel="preload" href="font/MyWebFont.woff2" as="font" crossorigin>

1.5 使用无衬线字体 (sans-serif) 更易于阅读

在当前主流的一些设备浏览器中，无衬线字体比衬线字体更易于阅读，在我留意过的所有大型网站 (e.g. Google, YouTube, Apple, Microsoft…) 均会默认整站为无衬线字体，即使用 sans-serif 属性。

font-family: sans-serif;

1.6 使用 swap 优先显示本地默认字体

我们知道，要显示出自定义的字体，需要先从服务器下载下来，然后浏览器进行页面的渲染，这个期间，如果不添加 swap 的属性，页面加载时将明显感知到有几秒空白时间，然后字体一下蹦出来，在网络不好的情况下，页面空白将持续更长时间，极度影响用户体验。

CSS的写法如下：

font-display: swap;

1.7 使用系统字体做为备选

我们都知道，font-family 通常都会指定几种字体，原因是其他字体都属于备选项，当网页无法成功加载第一个字体时，那么会顺延到第二个字体的加载。

那么我们该如何选择备选字体呢，是否随意指定一款字体都能做为备选？当然不是，我们设置它是有原因的，是为了解决兼容性的问题，同时，字体的阅读体验还不能产生太大影响。

使用系统字体的好处在于网页可直接调取用户电脑本地字体，这大大减少很多网页加载时间和渲染阻塞，且兼容性往往很好。

运用系统字体的方法非常简单，直接在 CSS 上调取下面的参数即可:

  • system-ui 使用用户当前系统的默认字体
  • -apple-system 是 system-ui 的兼容性写法，仅作用 macOS 和 iOS 系统
  • BlinkMacSystemFont 也是 system-ui 的兼容性写法，仅作用 macOS 系统

CSS的写法如下：

font-family: system-ui, -apple-system, BlinkMacSystemFont;

2 网站字体加载最佳实践方式

综上所示，了解了这些情况后，就是整体融合并运用的问题，下面将用Open Sans字体举例说明。

2.1 下载woff2字体

网站：https://gwfh.mranftl.com/fonts

在该网站上搜索Open Sans，字符集只选择latin，style只选择regular

WordPress – 网站加载自定义字体的最佳方式-StubbornHuang Blog

然后滑到最下方，下载字体文件，解压，上传到网站的字体目录下。

2.2 设置字体预加载

在</head>标签之前添加以下代码，使用get_template_directory_uri()获取主题根目录

<link rel="preload" href="<?php echo get_template_directory_uri() .'/fonts/OpenSans-400.woff2'; ?>" as="font" crossorigin>
<link rel="preload" href="<?php echo get_template_directory_uri() .'/fonts/OpenSans-700.woff2'; ?>" as="font" crossorigin>

2.3 加载字体样式

设置预加载后，则需要在CSS中加载字体样式，可以直接使用https://gwfh.mranftl.com/fonts 上给出的CSS代码，只不过需要注意修改字体的路径，需要与网站中字体文件的路径一致

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/open-sans-v35-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

如果字体名称包含空格，则需要添加一个双引号 “ ” 或单引号 ‘ ’，但你会发现实际上哪一种都有人在使用，无论是 Arial, ‘Arial’, “Arial” 都是等效的，仅 CSS3 定义的通用字体系列 (如 sans-serif) 必须写成无引号。

W3C 提到，为了避免转译的错误，用引号引用除连字符 (-) 以外的包含空格、数字、标点符号的字体系列名称。

2.4 设置font-family，使用字体

在CSS文件中添加以下代码

body {font-family:'Open Sans',system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;}

如果你希望网页支持表情，则需在sans-serif后面添加如下字体系列名称:

  • Apple Color Emoji
  • Segoe UI Emoji
  • Segoe UI Symbol

通过上面的步骤我们就可以正确的在我们的WordPress网站上使用自定义字体，并且尽量加载打开网站的速度。

参考链接