如何在本地的WordPress主题中托管Google字体？

时间：2018-12-26 作者：Ahmad

我正在为我的WordPress使用一个主题，它使用“Raleway”，并从Google fonts API请求（gtmetrix瀑布中有13个请求）。我想继续使用这种字体。然而，我正试图减少请求数量和页面大小。我是否可以在我的网站上包含/集成字体，以便浏览器不必执行任何外部请求？非常感谢

3 个回复

最合适的回答,由SO网友:Md. Ehsanul Haque Kanan 整理而成

遵循以下步骤：

使用将“Raleway”字体转换为web字体Transfonter.wp-content/uploads 文件夹

src: url(\'Raleway-Bold.woff2\') format(\'woff2\'),
url(\'Raleway-Bold.woff\') format(\'woff\');

您必须按以下方式更改它们：

src: url(\'t9w8m8j8.stackpathcdn.com/http://yourwebsite.com/wp-content/uploads/fonts/Raleway-Regular.woff2\') format(\'woff2\'), url(\'t9w8m8j8.stackpathcdn.com/http://yourwebsite.com/wp-content/uploads/fonts/Raleway-Regular.woff\') format(\'woff\');

最后，在测试页面中测试Raleway字体，以检查其是否正常工作。

您将找到有关这些步骤的更多信息here.

SO网友:jwalker

这可以使用子主题完成：https://www.cssigniter.com/add-custom-fonts-wordpress-website-using-child-theme我建议您在更改前后测试网站加载速度，以确保没有负面影响。建议使用诸如Google之类的CDN。

SO网友:Jasom Dotnet

从Googleapis下载CSS，其中包含有关嵌入式字体的信息。com。链接示例：

https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap

将文件直接保存到您的子主题目录中，以便现在：

https://www.example.com/wp-content/themes/theme-child/fonts.css

当你打开这个fonts.css 文件中，有如下内容：

/* latin-ext */
 @font-face {
   font-family: \'Montserrat\';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format(\'woff2\');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
...

保存字体自url 在新创建的文件夹中fonts 在子主题中，替换路径fonts.css 因此：

src: url(wp-content/themes/theme-child/fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format(\'woff2\');

就我而言，有60多种字体可供下载。因此，我编写了简单的PHP Downloader，如果有人问我，我很乐意将其开源。

添加fonts.css 到您的孩子主题

/**
 * Add local fonts 
 */
 function jasom_add_local_fonts() {
 wp_enqueue_style( \'local-fonts\', get_stylesheet_directory_uri() . \'/fonts.css\', array(), filemtime( dirname( FILE ) . \'/fonts.css\' ) ); 
 }
 add_action( \'wp_print_styles\', \'jasom_add_local_fonts\' );

刷新所有缓存并检查源代码是否存在以下行：

<link rel="stylesheet" id="local-fonts-css" href="https://www.example.com/wp-content/themes/theme-child/fonts.css?ver=1607598699" type="text/css" media="all">

如何注销主题之外的现有Google字体，以及source.

小码农CODE

如何在本地的WordPress主题中托管Google字体？

相关推荐

Using True Type Fonts (ttf)