如何让Google Fonts正常生效font-feature-settings配置

• 自定义@font-face写法错误：把Google Fonts的CSS样式文件地址填到了字体src属性里，浏览器根本没法从CSS地址解析出有效字体文件，这段自定义字体规则完全不生效，实际渲染用的是<link>标签引入的默认Google Fonts配置。
• 默认Google Fonts加载逻辑的限制：为了压缩加载体积，Google Fonts默认会对字体做子集裁剪，没有默认启用的OpenType特性（包括你用到的ss01/ss02/ss03文体替代字形）对应的字形数据会被直接裁掉，这种情况下就算写了font-feature-settings也不会生效，因为字体文件里根本没有对应字形。
• 小细节错误：你贴的Google Fonts引入链接少了一个斜杠，https:/fonts正确写法是https://fonts，虽然多数浏览器会自动补全，但极端场景下会出现加载失败。

方法1：通过官方参数指定需要的特性（性能最优，推荐） #

Google Fonts原生支持在引入链接里声明需要用到的字体特性，不需要自己写额外的@font-face规则，只要在引入链接末尾拼接&feature=ss01,ss02,ss03参数即可，正确的引入代码：

<link
  href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap&feature=ss01,ss02,ss03"
  rel="stylesheet"
/>

引入后直接给元素设置font-family: 'Source Sans Pro', sans-serif;即可，之前写的font-feature-settings配置会正常生效，而且Google Fonts会自动按需打包用到的字符和特性，加载体积比自己托管全量TTF小很多。

方法2：加载全量字体保证和本地TTF效果完全一致 #

如果需要用到字体的全部OpenType特性，不想逐个声明，可以在引入链接末尾加&subset=all参数，加载未做子集裁剪的全量字体文件，所有font-feature-settings的表现会和本地TTF完全一致，缺点是字体加载体积会比按需加载的版本大。

修正后的样式参考 #

删掉之前写的错误的自定义@font-face规则，样式部分直接写：

h1,
.h1 {
  font-family: "Source Sans Pro", sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  font-feature-settings: "ss01" on, "ss02" on, "ss03" on;
}

目前主流浏览器都已原生支持标准的font-feature-settings属性，不需要再添加-webkit-/-moz-/-o-这类浏览器前缀，保留也不会有功能问题，但属于冗余代码。

内容的提问来源于stack exchange，提问作者Frenz