WordPress主Web字体加载器本地化Web字体加载

现在,很多 wordpress 主题都采用了第三方 Web 字体,比如非常受欢迎的 Google 网页字体,但是这种第三方字体,对于网站的加载速度的影响是比较大的,此外还可能对用户隐私造成影响。WordPress 主题审核团队一直以来也是不允许在主题中加载第三方或 CDN 的脚本和样式文件的,但是此前对于 Google 字体是唯一放行的例外。不过现在他们已经发布了一个 Web 字体加载器(Webfonts Loader),可供主题作者用来为主题集成 Web 字体本地化加载的功能。

也就是说,通过 Webfonts Loader 加载的 Web 字体,会自动将字体文件下载到用户的主机空间中,然后从本地加载,不再需要 CDN 调用外链的字体。随着 Webfonts Loader 的到来,以后只要主题中用到第三方 Web 字体(不仅限于 Google 字体),都需要采用这个加载器实现本地化调用。

Webfonts Loader

项目地址:https://github.com/WPTT/webfont-loader

下载网络字体(例如 Google 字体),并将其托管在 WordPress 网站本地(下载到 /wp-content/fonts 目录)。这样可以提高性能(减少对多个顶级域的请求)并增强隐私保护。由于字体是在站点上本地托管的,无需 ping 通到第三方服务器来获取 Web 字体,无法进行跟踪。

使用方法

WordPress 主题通常使用以下 wp_enqueue_style 功能来排队脚本文件:

  1. function my_theme_enqueue_assets() {
  2. 	// Load the theme stylesheet.
  3. 	wp_enqueue_style(
  4. 		'my-theme',
  5. 		get_stylesheet_directory_uri() . 'https://img.2kss.com/style.css',
  6. 		array(),
  7. 		'1.0'
  8. 	);
  9. 	// Load the webfont.
  10. 	wp_enqueue_style(
  11. 		'literata',
  12. 		'https://fonts.googleapis.com/css2?family=Literata&display=swap',
  13. 		array(),
  14. 		'1.0'
  15. 	);
  16. }
  17. add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

要本地托管 Web 字体,您首先需要从该存储库下载 wptt-webfont-loader.php 文件并将其复制到主题中。完成此操作后,以上代码可以转换为以下代码:

  1. function my_theme_enqueue_assets() {
  2. 	// Include the file.
  3. 	require_once get_theme_file_path( 'inc/wptt-webfont-loader.php' );
  4. 	// Load the theme stylesheet.
  5. 	wp_enqueue_style(
  6. 		'my-theme',
  7. 		get_stylesheet_directory_uri() . 'https://img.2kss.com/style.css',
  8. 		array(),
  9. 		'1.0'
  10. 	);
  11. 	// Load the webfont.
  12. 	wp_add_inline_style(
  13. 		'my-theme',
  14. 		wptt_get_webfont_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap' )
  15. 	);
  16. }
  17. add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_assets' );

支持 IE

默认情况下,wptt_get_webfont_styles 将下载.woff2 文件。但是,如果需要支持 IE,则需要使用.woff 文件。为此,您可以在 wptt_get_webfont_styles 函数中,将 woff 作为第二个参数传递:

  1. wptt_get_webfont_styles( 'https://fonts.googleapis.com/css2?family=Literata&display=swap', 'woff' );

总结

Webfonts Loader 的到来,为所有主题开发者提供了对 Web 字体的标准处理方式,但是这个需要主题开发者进行集成实现。如果你是一般用户,并且主题没有集成这个功能,那你可以使用 OMGF | Host Google Fonts Locally 或 Self-Hosted Google Fonts 插件来实现 Google 字体本地化加载。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/76616

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买