β

解决WordPress中Google字体问题的终极大法

Kyle's blog 235 阅读
Spread this post. Share on Facebook Share on Google+ Tweet about this on Twitter Share on LinkedIn Share on Tumblr

Google字体问题:因为GFW将Google拒之门外,所以天朝的网民是访问不到Google的。Wordpress中的主题大多使用Google的开源字体Open-Sans,所以绝大多数人访问Wordpress博客都会遇到访问慢,字体错误的问题。

之前写过博文,使用useso.com的CDN解决Google字体问题,最近发现这个网站的链接已然访问不到了,真是悲催……所以就要用终极大法了——字体本地化。

下载Google字体

首先要把Google的字体下载到本地,通过Google字体的CSS文件找到Google字体的地址,然后下载到本地。CSS文件可以通过Web调试工具拿到(右键->审查元素),或者访问 https://www.google.com/fonts 根据需要选择字体,然后生成CSS链接、访问。

拿到的CSS类似这样:

/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTQ7aC6SjiAOpAWOKfJDfVRY.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
....
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

一般只取 /* latin */ 部分就可以啦。

创建本地CSS字体文件

将字体文件上传到网站目录,我放到了 /wp-incluces/googlefonts/ 下,然后,在wp-includes/css/中新建一个CSS,用来替换Google字体的CSS链接。内容是这样的:

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(/wp-includes/googlefonts/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(/wp-includes/googlefonts/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(/wp-includes/googlefonts/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/wp-includes/googlefonts/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(/wp-includes/googlefonts/EInbV5DfGHOiMmvb1Xr-hhampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(/wp-includes/googlefonts/PRmiXeptR36kaC0GEAetxtTIkQYohD4BpHvJ3NvbHoA.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(/wp-includes/googlefonts/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(/wp-includes/googlefonts/PRmiXeptR36kaC0GEAetxsiAiQ_a33snTsJhwZvMEaI.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(/wp-includes/googlefonts/PRmiXeptR36kaC0GEAetxv79_ZuUxCigM2DespTnFaw.woff2) format('woff2');
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: local('Open Sans Extrabold Italic'), local('OpenSans-ExtraboldItalic'), url(/wp-includes/googlefonts/PRmiXeptR36kaC0GEAetxmPkvcX8kXDzy1NrkNCBkJ4.woff2) format('woff2');
}

没错,可以通过编辑Google的那个CSS文件得到(保证字体文件名不变就可以)。

替换CSS链接

最后,修改Google字体CSS链接为本地链接:

// $open_sans_font_url = "https://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600&subset=$subsets";
$open_sans_font_url = "/wp-includes/css/google-font.css";

如果主题里面有类似链接的话,也要改成这个哈。这样就大功告成了,去访问一下吧,是不是速度嗖嗖的~

作者:Kyle's blog
A new start.
原文地址:解决WordPress中Google字体问题的终极大法, 感谢原作者分享。