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

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类似这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 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链接。内容是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/* 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”;

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