更改网站字体

看惯了千篇一律的宋体、微软雅黑等系统自带的字体，想换一个彰显个性的字体。于是在网上找了教程并在自己的博客上用了起来，感觉还不错，在这里分享给大家。（其实网上的教程非常的多，这边也只是做一个简单的搬运）。

第一步：下载字体

下载自己喜欢的字体，字体格式为 .ttf，这里推荐一个字体网站非常的不错：
http://www.zhaozi.cn/s/all/ttf/

第二步：转换字体

将下载好的字体转换成 .eot、 .woff、 .woff2 三种格式，文件名可以是任意 英文 ，没有特殊要求，可以根据自己的喜好命名（不要设置为中文就可以了）。这里推荐一个在线转化的网站：https://www.fontke.com/tool/convfont/

第三步：上传字体

将转换好的 .eot、 .woff、 .woff2 三种格式字体上传到自己网站任何位置，只要和后面的代码路径一致就可以了。

第四步：调用代码

打开网站 / 博客主题 CSS 文件里面的 style.css 文件（不同程序命名可能不一样，请自行查找,joe 主题是joe.min.css），在最下面（位置没有固定要求）放入以下代码

@font-face {font-family: "light (字体名字可自行修改)";
  src: url(https://light.woff2（根据自己的字体路径修改）) format("woff2"),
       url(https://light.woff（根据自己的字体路径修改）) format("woff"),
       url(https://light.ttf（根据自己的字体路径修改）) format("truetype"),
       url(https://light.eot（根据自己的字体路径修改）) format("embedded-opentype"),
       url(https://light.svg（根据自己的字体路径修改）) format("svg");
}

上面的代码里 .ttf 和 .svg的文件是没有的，但是路径要和 .eot、 .woff、 .woff2 三种格式路径保持一致，否则字体将不会正常显示。

然后继续在 style.css 文件里添加以下代码

body {font-family: light(名称和上面字体名称一致）!important;}

如果 CSS 文件本身就有 body { 的话就把 font-family: light(名称和上面字体名称一致）!important; 添加到原有的 body { 里面。

温馨提示

字体的名字请取纯英文的，然后代码中中文解释连同前后括号部分删除如 （字体名字可自行修改）

特别说明

本来参考：https://www.dpaoz.com/820