漂亮的網站，當然需要適合的字型配合，馬上換字型啦！
第3步：設定字型
此篇以設定「思源黑體」作示範，其他Google Web Fonts也是類似設置。
「思源黑體」是Google和Adobe合作製作的開源字型，可到 Google Noto Fonts 看實際效果。也可下載到電腦安裝使用。
由於「思源黑體」繁體中文版尚未正式被納入Google Fonts，需要在 Google Fonts : Early Access 中尋找 Noto Sans TC。
可在CSS中直接貼上連結匯入：
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);其實notosanstc.css就是以下：
/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
*/
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 100;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 300;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 900;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
}如果不會用到全部的粗度，建議直接貼上會用到的 font-weight 部分就好，可節省載入時間。
AC選擇 font-weight 300 及 500，分別作為一般及粗體字型：
/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
*/
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 300;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans TC';
font-style: normal;
font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
}
貼上自訂CSS後，修改範本XML中的font-family：
小貼士：如果想英文字型與中文不相同，須將英文字型放於中文字型前，這樣兩種字型都能顯示。
儲存範本後完成設定！
Google Fonts : Early Access 還有其他中文字型可選：