Adobe 已將 Typekit 整合為 Adobe Fonts，可免費無上限添加網站專案，以及以圖搜尋字體。
隨著 CSS3 面世，網站現可用 @fonts 自訂字體。不過中文網站可用的免費自訂字體並不多，除了 Google Fonts 之外，Adobe 的思源黑體和思源宋體亦是熱門選擇。不過網站要怎樣才能用到該兩款字型呢，除了把字型檔上載至伺服器外，其實還可以用 Adobe Typekit 直接套用。
甚麼是 Adobe Typekit？
Adobe 已將 Typekit 轉成 Adobe Fonts
Adobe Typekit 是一個字體訂閱服務，用戶能把字體同步到到電腦和網站。要使用 Typekit，用戶必須要有 Adobe ID。
Adobe Typekit 共設有三個計劃，其中一個為免費，但功能較其餘兩個的收費版有所局限；如果用戶本身有訂閱 Adobe Creative Cloud 則可使用 Typekit。
▼Adobe Typekit 三個計劃的細節
Adobe Typekit 主要三大功能：
1.同步字體至 Adobe Creative Cloud 產品
用戶可在 Typekit 上搜尋字體並將之與 Creative Cloud 中的程式同步，如 Photoshop、Illustrator 等。用戶可選擇 Serif、Sans-serif，以及用於標題、段落等來找出所需字體。之後只需點選「Sync」便可。
▼點選「Sync」便可把字體同步到 Adobe Creative Cloud 其他產品
2.以圖搜尋字體
用戶可上載圖片，Typekit 就會自動選出最近似的字體。這功能是由 Adobe 近期經常提到的人工智能技術 Sensei 技援。
▼用戶可上載圖片，之後 Typekit 就會分析字體
▼上載圖片後，Adobe Typekit 就會找出與圖片最相似的字體。
3.嵌入網頁字體
透過 Typekit 內的 Kits，用戶就可以把 Typekit 內的字體用於網站，這樣用戶就不用把字型檔上載，並改善字體載入效率。接下來將講解如何將有襯線的「思源宋體」和無襯線的「思源黑體」加入網頁字體之中。
▼可把字體加入 Adobe Typekit 內的 Kits，以套用字體至指定網頁之中
如何透過 Adobe Typekit 把自訂字體加至網頁？
步驟 1.搜尋字體
首先當然要在 Adobe Typekit 內搜尋思源宋體和思源黑體。只需輸入「Chinese」就會找到該兩款字體。直接輸入「思源宋體」或「思源黑體」並不會找到任何結果，因為兩者在 Typekit 的名稱分別為「Source Han Serif Traditional Chinese」和「Source Han Sans Traditional Chinese」。
▼只需輸入「Chinese」就會找到「思源宋體」和「思源黑體」
點擊所需字體，就可看到字體在不同粗幼度的效果。
步驟 2.加入至 Kit
接著就可以點擊「Add to Kit」。用戶可選擇把字體加入現有的 Kit 或創建一個新的 Kit。如果是建立新 Kit 的話，就需要為 Kit 命名和設定字體所用的域名。注意：免費版只能建立一個 Kit，但每一個 Kit 可使用多於一個的字體。
▼可選擇把字體加至現有的 Kit，或建立一個新的 Kit
▼建立 Kit 時需要設定 Kit 的名稱和使用域名（Source : Adobe）
步驟 3.加入 CSS/JS 檔案至網頁
設定好 Kit 後，Typekit 就會顯示網頁需要的 HTML 碼。如果是英文字體的話會是 CSS 檔，但如果是中文等東亞字體就是 JS 檔。把 HTML 碼複製至網頁之中便可。
▼需要把以下 CSS 檔加入網頁方能使用自訂字體（Source : Adobe）
▼如果是東亞字體就會是 JS 檔
步驟 4.設定要套用字體的文字
最後一步，就是為網頁指定元素套用字體！方法有兩種。
第一，用戶可在 Adobe Typekit 內的 Selectors 設定要套用字體的元素，可以是 HTML 元素、Class 或 ID。
▼可在左邊新增 Selectors 以確定要套用字體的網頁元素
第二，用戶可在自己的 CSS 檔設定字體。
▼亦可在自己的 CSS 檔加入 font-family 。
點擊 Using Fonts in CSS 後，就可以看到字體的 font-family 值（如 “source-han-serif-tc” ），之後直接在自己的 CSS 檔中為元素加入相應的 font-family 便可，例如：
h1 {
font-family: "source-han-serif-tc",serif;
}
不同字型大小、顏色的思源宋體效果如下：
