前言

最近在琢磨怎么提高外贸站点的国外访客打开速度，那么自然就在现在网站的最减缓速度的地方开始动脑筋，自定义字体必须要修改

现有字体方案

使用的是@font-face的函数，调用网站自带的字体库

@font-face{font-family:pop-b;src:url(fonts/Poppins/Poppins-Bold.ttf) format("opentype");}
@font-face{font-family:pop-l;src:url(fonts/Poppins/Poppins-Light.ttf) format("opentype");}
@font-face{font-family:pop-m;src:url(fonts/Poppins/Poppins-Medium.ttf) format("opentype");}
@font-face{font-family:pop-r;src:url(fonts/Poppins/Poppins-Regular.ttf) format("opentype");} 
@font-face{font-family:pop-s;src:url(fonts/Poppins/Poppins-SemiBold.ttf) format("opentype");}

用了自定义的字体网站的确有些漂亮，但是庞大的网站字体库文件不但减缓了网页的加载速度，也提高了服务器的压力。

解决办法

想来想去还是得恢复成Google的云字体，只有这样才可能降低字体的加载速度。由于我网站的访客只有国外访客才有价值，因此不需要考虑Google字体被墙的事情。

第一步：到google的字体站点选择好需要的字体，并选择好需要的字体粗细，获取对应的代码，复制到网站css文件的开头处。

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap'); /* 使用Google云字体库中Poppins字体，需要使用到300，400，500，600，700等几种的字体粗细*/

第二步：在css文件中对字体根据不同的粗细完成自定义操作

.Poppinser{ font-family: 'Poppins', sans-serif; font-weight: Normal; /* 默认采用normal粗细 */ } 
.pop-l{ font-weight:300; /* 字体粗细为300*/} 
.pop-r{ font-weight:400; /* 字体粗细为400*/} 
.rbt-m{ font-weight:500; /* 字体粗细为500*/} 
.rbt-s{ font-weight:600; /* 字体粗细为600*/} 
.rbt-b{ font-weight:700; /* 字体粗细为700*/}

第三步：完成对页面代码的修改

<p class="Poppinser pop-l">使用自定义名为Poppinser的字体，粗细为300，其他类推</p>