最近浏览别人博客的时候，发现别人博客的字体很好看，于是也开始折腾起更换博客的字体。我的博客英文使用的字体是sail这款免费字体，官网： https://www.fontsquirrel.com/fonts/sail?q%5Bterm%5D=sail&q%5Bsearch_check%5D=Y
方法一
fontsquirrel这个平台还提供了字体文件转换功能，先去下载页下载好相应字体的OTF文件，然后点该网站的generator菜单，进入字体转换界面
把刚才下载的字体上传上去，然后fontsquirrel这个网站会将该字体转换成网页字体的格式woff/woff2 。将提供的压缩包下载下来，解压然后将里面的woff和woff2格式的字体文件上传到你的web目录下，然后再编辑解压后文件夹里的fonts.css ，复制到记事本，将里面的src地址更改为你字体在web服务器上的目录，如下
@font-face {
font-family: 'sailregular';
src: url('https://blog.hibobmaster.com/font/sail-regular-webfont.woff2') format('woff2'),
url('https://blog.hibobmaster.com/font/sail-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
# 用了CDN的话
@font-face {
font-family: 'sailregular';
src: url('//cdn.hibobmaster.com/font/sail-regular-webfont.woff2') format('woff2'),
url('//cdn.hibobmaster.com/font/sail-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}接着申明该字体，你可以随便取个名字，然后可以参考如下配置并修改
span.super-font{
font-family:"sailregular";
font-size:25px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stoke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}最后自定义你的主题，把上述代码一起添加到额外的css类中，下次要使用这个字体时调用就可以了。
比如你要更改文章标题的字体，可以输入< span class="super-font">The way to change font in WordPress</span>或者在段落的高级-›额外的CSS类中写上super-font，然后预览就可以发现字体改变了。
用浏览器的审查元素功能，查看你想修改的部分的层叠样式表，这里以文章目录为例（原来的font-family是默认字体我已经改过了）
用ftp工具把上述层叠样式表下载下来，然后搜索 toc_container a （搜索其它的也行只要能定向到那个地方），然后把更改font-family为你字体的名称，保存然后上传就好（最好先备份）
方法二
安装一款插件Orbit Fox，这款插件在编辑器中添加了好几种强大的功能增强区块
我们要使用的是这款插件提供的Advanced Heading区块
效果演示
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
参考文档：
发表回复