欣益奇自媒体思源黑体是由Google和Adobe在2015年6月16共同发表的免开源字体，支援繁体中文、简体中文、日文、韩文等字体。而Google公司将此字型另起名为Noto Sans CJK释出。随后，也在这几年推出正式的WebFont – Noto San TC，让我们不需要下载整个完整的语言档案，也能直接使用托管在Google Fonts当中的Noto Sans TC的CSS Web Font字体。
Google Fonts最早只在Early Access当中提供Noto Sans的思源黑体Beta版本，且当时还未提供CJK TC繁体，因此在当时若想要直接取用Web Font，是无法直接引用完整的Noto Sans CJK TC，而是必须要将整个字体下载，并上传至主机当中后，才能读取完整的档案。
而现在，我们终于可以直接在Google Fonts 当中，直接嵌入托管在Google Fonts 当中的Noto Sans TC 正式版字体。
今天除了要教你在网站中直接载入Google Fonts当中的Noto Sans TC字体之外，也要告诉你如何改善网站载入字体前，会预先载入Web Font的字体，让你的文字内容不会跳一下或消失再出现的情况。
Noto Sans TC 使用教学
步骤一
到Google Fonts 寻找字体
为了要使用Noto Sans TC 的Web Font，我们需要先到Google Fonts 当中，找到Noto Sans TC 的字型页面。
你可以在进入Google Fonts 页面之后，在右上方的搜寻框当中输入「Noto Sans TC」找到该字体：
步骤二
指定字体客制化样式
进入Noto Sans TC 字体页面之后，会显示目前字体所包含的所有字元与样式：
往下拉一点，你可以在Google Fonts 当中的Styles 栏位当中，输入你的测试文字，来看看套用Noto Sans TC 后所显示的字体画面，同时Google Fonts 也会显示目前这个字体的字体大小为何：
再继续往下拉一点，你会看到左下角能够预先选择Noto Sans TC 的Style，例如：
- Thin
- Light
- Regular
- Medium
- Bold
- Black
如果没有特别指定，那么字体就保留预设的Regular 就可以了：
步骤三
选择Noto Sans TC Web Font 字型
接下来，就要取得Noto Sans TC 的CSS 样式，因此我们回到最上方右上角的地方，点选「SELECT THIS FONT」，就能取得Embed font 的CSS 样式：
步骤四
客制化Noto Sans TC Web Fonts 字体
刚刚提到Google Fonts 字体可以在载入时先载入客制化的字体样式，如此可以让我们只针对指定的字体载入，而不需要载入整个Noto Sans TC 的字体，大大降低载入字体的大小：
最后再回到「EMBED」，取得最后所需要的CSS 样式载入连结：
由上述可知，以前在使用Google Fonts 取得Noto Sans TC Web Font 字体时，只能使用：
https://fonts.googleapis.com/css?family=Noto+Sans+TC &subset =chinese-traditional
而现在Google Fonts 开始支援直接在Web Font 当中使用Display 参数后，所取得的Web Font link 就会变成：
https://fonts.googleapis.com/css?family=Noto+Sans+TC &display =swap &subset =chinese-traditional
因此现在即使是载入Google Fonts的Noto Sans TC Web Font字体，也能有「font-display=swap」的效果。
