Adobe Fonts 免費網頁字體服務,前身為 Typekit,改版後不限制流量?

為了美觀,我們通常都會為網頁加上非系統內建的字體來改善品質,只不過帶來的問題就是增加了網頁大小,速度變慢,尤其是中文字體。所以大多站長都會選擇使用字體服務提供商的 CDN 來載入,最好的例子就是 Google Fonts

Google Fonts 是使用類似「區段」的方式來載入中文字體。這很合理,先偵測網頁中有用到的中文字後,再將有用到的區段分別載入,可以省下大量的不必要流量。只不過在這篇文章中我要來介紹的是更強大的字體服務 Adobe Fonts,是 Typekit 改版後的產品。

而 Typekit 是以「字集」的方式來進行載入,它只會載入有用到的字體,檔案更小,比 Google Fonts 更加省資源。

但大家都還是用 Google Fonts 是因為原本的 Typekit 免費方案有一個月 25000 次的存取限制,網路上大多數的 Typekit 介紹文也都是這麼說明的。

woodtype 846089 1280

最近為了加強網頁載入品質,我追朔到 2019 年 12 月 13 日 Adobe Fonts 使用手冊 中的說明:

No plan limits: unlimited activations & unlimited pageviews

There are no limits on the number of fonts that can be activated at the same time and no more limits on the number of monthly pageviews for web fonts.

大意就是說現在的 Adobe Fonts 不會去限制每月存取次數與字體限制,已全部解禁。

既然知道了這個好消息,當然是馬上著手來將字體來源改成 Adobe Fonts,沒意外的話會一直使用它。

整體的安裝流程與 Typekit 沒差很多,就少了網域綁定這一塊而已,我們開始吧!

登入 Adobe 帳戶

首先前往 Adobe Fonts 網頁,點擊右上角的 Sign In 登入帳號。

Adobe 登入介面

選擇與啟用字體

登入後就可以從列表中選擇你要用的字體,直接點擊區塊進入細部設定介面。

Adobe Fonts 字體列表

以目前最夯的思源黑體來說,一般部落格只會用到 Regular 與 Bold 兩種樣式,直接點亮右方的開關後,按下列表上靠右邊的 Add to Web Project。

Adobe Fonts 思源黑體樣式控制面板

新建網頁專案,取得程式碼

接下來在這個介面上的下拉式選單新增一個專案 WordPress (看你喜好),之後按下 Create 來取得程式碼。

Adobe Fonts 新增字體至網頁專案

最後直接將程式碼貼到網站的 <head> 標籤中,並在網頁 CSS 中的文字區塊中加上:

font-family: source-han-sans-traditional, sans-serif;
Adobe Fonts 程式碼複製

清除快取,重新整理網頁後就能看到效果。

套用 Adobe Fonts 的思源黑體後的網頁截圖

最後,很希望 Adobe 可以讓這個平台服務下去,對於我這種免費仔來說真的是個很讚的東西。😂

訂閱
Notify of
guest
0 留言
Inline Feedbacks
檢視所有留言