如何彻底禁用WordPress中的Google字体

谷歌字体为我们的网站提供了漂亮的字体,特别是英文字体。当然其中也提供了少数中文字体,比如本网站使用的Noto Sans,它的一个版本就可以支持中文,这个字体的离线包地址可以在下面的地址下载:Noto Sans SC。个人觉得还是蛮好看的。为什么我们会提供下载地址。下面的教程会用得上。

elements-envato 如何彻底禁用Wordpress中的Google字体

谷歌字体虽然漂亮。但由于特殊情况,我们用不上这个服务。这个服务会让您的网站加载奇慢,这也就是大多数使用国外主题或是插件导致我们的网站加载慢的原因。让不少人抓狂。网上也有很多插件,但本人试过,很多都是针对特定主题或是插件的,要不是就是针对wordpress程序的,比如古腾堡编辑器,默认官方主题的谷歌字体禁用。那么有没有一种方法能全部去除谷歌字体呢。当然是有。下面我们就来分享代码。

add_action('wp_loaded', 'ietheme_disable_google_fonts'); 
function ietheme_disable_google_fonts() {
ob_start('ietheme_disable_google_fonts_regex');
}
function ietheme_disable_google_fonts_regex($html) {
$html = preg_replace('/<link[^<>]*\/\/fonts\.(googleapis|google|gstatic)\.com[^<>]*>/i', '', $html);
return $html;
}

将上面的代码放在您的主题的function.php文件里面即可。如果您不会自己修改或是不知道添加代码,您好可以下载我们的优化插件ie optimize,您只需要安装它,在后台设置出勾选相关选项就行了。其它的一切都交给插件去解决。

但是这个方法也有一个缺点,那就是在css或是自定义样式表里还是会谷歌字体的名字,但不会生效有谷歌字体。只是加速我们的网站加载时间而已。

如果万一我们要用谷歌字体咋办呢。那就是一个办法,本地化谷歌字体或是把谷歌字体缓存到自己的cdn上。下面我们介绍上面的两种方法。

本地化谷歌字体大家可以用插件来解决。下面给大家推荐有这种功能的插件:Host Google Fonts LocallyCAOS for Webfonts 

具体这两个插件怎么使用,请到上面两个地址看说明文档,具体细节在这里不做详细描述了。下面我们说的是自己使用谷歌字体的情况。

首先,前往Google Webfonts helper,找到我们喜欢的字体。比如我们在文章开始提到的支持中文的Noto Sans。下载我们选择的字体压缩包,解压到本地或是放在自己的cdn或对象存储上, 并用下面的代码引用字体,(这里以Noto Sans为例)

/* noto-sans-sc-regular - latin_chinese-simplified */
@font-face {
font-family: 'Noto Sans SC';/*字体名字*/
font-style: normal;
font-weight: 400; /*下面的url地址可以是绝对地址也可以是相对地址*/
src: url('../fonts/noto-sans-sc-v11-latin_chinese-simplified-regular.eot'); /* IE9 Compat Modes */
src: local('Noto Sans SC Regular'), local('NotoSansSC-Regular'),
url('../fonts/noto-sans-sc-v11-latin_chinese-simplified-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/noto-sans-sc-v11-latin_chinese-simplified-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/noto-sans-sc-v11-latin_chinese-simplified-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/noto-sans-sc-v11-latin_chinese-simplified-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/noto-sans-sc-v11-latin_chinese-simplified-regular.svg#NotoSansSC') format('svg'); /* Legacy iOS */
}

如上述CSS代码使用的就是相对地址。绝对地址相对地址如果不懂的请自行百度。将上述代码加在您的主题的style.css的适当位置,比如开头或是末尾都可以。然后就是我们定义那些原始只用这个谷歌字体,找到您的style.css下面的带font-family的class或是id。将其中的字体改成谷歌字体的名称即可。下面给一个例子。

body{
font-family: 'Noto Sans SC', Arial, sans-serif;
font-weight: 400;
font-style: normal;
}
h1, h2, h3, h4, h4, h6 {
font-family: 'Noto Sans SC', Arial, sans-serif;
font-weight: 700;
font-style: normal;
}

好了。感觉写到这里就差不多了。不管各位看不看得懂。反正我个人觉得写得还是比较通俗易懂的。

本文已在Ie主题99839发布

文章来源:https://ietheme.com/remove-google-webfonts.html


发表评论

撰写评论

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

加入我们

注册完成!

密码重置

请输入您的邮箱地址。 您将收到一个链接来创建新密码。

检查你的邮件中的确认链接。