前言
有些网站需要加载谷歌字体，由于网络问题或者某些问题，fonts.googleapis.com访问太慢会导致站点加载很慢。虽然最后能看到网站，但实际上谷歌字体依然加载失败了，这个体验就非常差劲了。
解决方法
实际上这个谷歌字体是可以不需要去访问的，当然有强迫症的可以靠fan qiang等某些操作来达到快速加载的目的。个人建议是直接屏蔽掉这个谷歌字体的访问，一般都会在浏览器安装adblockplus等广告拦截插件，可以在这些广告拦截插件添加新的拦截规则：
这样就可以拦截谷歌字体的访问，以避免访问站点过慢的问题。按照这个思路，理论上直接改hosts文件，把这个地址重定向到localhost应该也是可行的。
补充
如果是自己搭建的站点需要加载谷歌字体，那么有两种方法。
方法一
使用360提供的cdn，将需要加载的谷歌字体的url放到360的Google 字体库搜索，会得到一串css代码，将代码拷贝到一个css文件中然后站点直接引入该css文件即可。
比如说，现在需要引入https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600这个谷歌字体，那么前往360的Google 字体库搜索得到如下代码：
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
|
/* roboto-mono-regular */
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: regular;
src: url('//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto Mono'), local('RobotoMono-Normal'),
url('//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.woff') format('woff'), /* Modern Browsers */
url('//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-300 */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-300.eot'); /* IE9 Compat Modes */
src: local('Source Sans Pro'), local('SourceSans Pro-Normal'),
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-300.woff2') format('woff2'), /* Super Modern Browsers */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-300.woff') format('woff'), /* Modern Browsers */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-300.svg#SourceSans Pro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-regular */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: regular;
src: url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-regular.eot'); /* IE9 Compat Modes */
src: local('Source Sans Pro'), local('SourceSans Pro-Normal'),
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-regular.woff') format('woff'), /* Modern Browsers */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-regular.svg#SourceSans Pro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600 */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-600.eot'); /* IE9 Compat Modes */
src: local('Source Sans Pro'), local('SourceSans Pro-Normal'),
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-600.woff2') format('woff2'), /* Super Modern Browsers */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-600.woff') format('woff'), /* Modern Browsers */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-600.ttf') format('truetype'), /* Safari, Android, iOS */
url('//lib.baomitu.com/fonts/source-sans-pro/source-sans-pro-600.svg#SourceSans Pro') format('svg'); /* Legacy iOS */
}
|
将其拷贝到新建的css文件fonts.css中，然后在站点引入该css文件：
1
| <link rel="stylesheet" href="/fonts.css" >
|
方法二
跟方法一是一回事，只不过不是去360提供的Google 字体库获取代码，而是直接去谷歌字体的链接把代码下载下来，拷贝到一个css文件里。
甚至还可以将css文件里的字体文件woff或者ttf等下载下来，然后把css代码里的字体文件链接全改为本地的字体文件，之后依然是在站点中引入css文件即可。想看更具体的做法可以参考这篇文章，当然了，对于懒人来说，直接不用谷歌字体就完事了，比如说我。
参考链接
警告
本文最后更新于 March 2, 2021，文中内容可能已过时，请谨慎使用。
