谷歌在线字体不生效

背景

之前博客字体一直是保持默认，也就是常见的黑体，而且字号很小，但是自己一直没怎么去读过，也就没发现问题。直到最近放假，我自己读了几篇文章才发现读起来很难受，不说内容如何，就是这字体看起来是真的费劲。于是赶紧把默认字体调大了一些，但还是感觉不太行。

经常看到很多人的博客用的是那种类似于宋体的字，看起来挺舒服的。查了一些资料后才知道这是衬线字体的功劳，具体可以看下这篇文章：区分衬线字体和无衬线字体

于是我也想换个衬线字体，然后又不经意间了解到Google的在线字体库支持思源宋体了。个人感觉思源宋体正好满足我的需求，而且还开源免费，于是就开始尝试把字体换成思源宋体。

首先使用科学上网打开谷歌字体库

在第一个红框选择简体中文，第二个红框就是要找的思源宋体，点进去，选择一个适合自己的字重，我这里选的是400的

选中后右边就会弹出边框（也可以点右上角的小方格），可以看到两个链接

所以要用到的HTML链接就是：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap" rel="stylesheet">

CSS字体族：

font-family: 'Noto Serif SC', serif;

然后正常情况下嵌入到HTML里并指定全局字体就可以，但是却遇到了问题。

先按照从谷歌获取到的字体链接修改主题配置文件：

font:
  global-font-size: 16px
  code-font-size: 16px
  font-family: -apple-system, "Noto Serif SC", sans-serif
  code-font-family: consolas, sans-serif

blog_title_font:
  font_link: https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&display=swap 
  font-family: -apple-system, "Noto Serif SC", sans-serif

然后在本地测试运行可以如预期地正常显示，但是部署之后又变成默认字体。

也不知道是哪里出了问题，开始还以为是谷歌连接不上的原因，但是浏览器却可以在不科学上网的情况下打开字体链接...

感觉是部署后的代码问题，于是查看部署之后网页代码，发现preconnect不太对，按照谷歌给的链接应该是https://fonts.gstatic.com。

于是去找模板文件，在preconnect.pug中找到：

link(rel="preconnect" href="//fonts.googleapis.com" crossorigin='')

把这一行改成:

link(rel="preconnect" href="//fonts.gstatic.com")

然后重新部署，问题就解决了。

问题好像还没有完全解决

我用Chrome还是不生效，Edge和Firefox却都没问题