fonts.googleapis.com访问太慢导致站点加载很慢

雨临Lewis

发布于 2022-01-12 11:13:44

5K0

前言

有些网站需要加载谷歌字体，由于网络问题或者某些问题，fonts.googleapis.com访问太慢会导致站点加载很慢。虽然最后能看到网站，但实际上谷歌字体依然加载失败了，这个体验就非常差劲了。

解决方法

实际上这个谷歌字体是可以不需要去访问的，当然有强迫症的可以靠访问国外网站等某些操作来达到快速加载的目的。个人建议是直接屏蔽掉这个谷歌字体的访问，一般都会在浏览器安装adblockplus等广告拦截插件，可以在这些广告拦截插件添加新的拦截规则：

1	\|\|fonts.googleapis.com

这样就可以拦截谷歌字体的访问，以避免访问站点过慢的问题。按照这个思路，理论上直接改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文件：