justfont 雲端字型|中文網站告別新細明體的最簡單方法

架網站的時候,字體這件事大部分人都是靠著預設字體撐過去的。新細明體、正黑體,就這樣了,也不知道能怎麼辦。

我有個客戶,網站開了之後一直覺得速度慢,找了好久好久的問題。一開始以為是圖片太大,把圖片壓了又壓;後來覺得是不是主機太爛,或是主機的線路太慢,聯絡了我排查了一輪,最後才發現原來是他把整套中文字型檔案直接上傳到網站,訪客每次看文章,伺服器就一直把那包字型檔案送過去,網站速度當然慢。

解法是用雲端字型服務。不用自己把字型存在主機上,改成從字型商的伺服器載入,網頁裡面出現哪些漢字,就只傳那些漢字的資料過去,不是整包字型一次送完,速度自然就快了。我自己用過、也最常推薦給客戶的是台灣的 justfont。

為什麼中文網站特別難換字體?

一套英文字型包含大小寫字母、數字、標點符號,再加上歐洲各國語言用到的附加符號(像是法文的 é、德文的 ü、西班牙文的 ñ 這類),字符種類相對有限,一個檔案大約幾十 KB,對頁面載入幾乎沒什麼影響。中文字型就完全不同了,光是台灣日常用到的漢字大概就有 4,000 個左右,如果要完整符合 Unicode 規格,需要涵蓋 1 萬多個字符,一套完整的中文字型動輒 5 MB 到 20 MB 以上,直接讓訪客下載,頁面速度一定扛不住。

所以中文網站要換字體,就要用支援「只傳輸頁面用到的漢字」的服務,justfont 做的就是這件事,不用你自己去設定或管理,嵌入他們給的程式碼,其餘的他們幫你處理。

justfont 有哪些字體可以選?

justfont 有自己開發的商業字型,也整合了開源字型資源。依照用途大概可以分兩類來選。

標題、視覺區塊可以選 justfont 自家設計的繁體中文字型,他們有一些很有個性的選項,適合做品牌識別或視覺強調的地方,這類字型需要付費訂閱。

內文閱讀我推薦「思源黑體」,這是 Google 和 Adobe 合作開發的開源字型,完全免費,讀起來比新細明體舒服太多,而且穩定。justfont 也有推出自己的「信黑體」,設計感比思源黑體更強,比較適合做標題用途,想用的話需要付費訂閱。如果你同時在規劃網站的整體視覺,可以參考我整理的免費又漂亮的線上設計工具推薦,字型只是其中一塊,搭配好的配色工具效果更完整。

justfont 費用是多少?

justfont 有免費版,可以使用部分開源字型(包括思源黑體),對個人部落格或流量不算大的網站來說通常夠用。想用他們自家設計的進階字型,就要甩付費訂閱,方案依字型種類和每月頁面瀏覽量計費。

具體費率直接到 justfont 官網 查,方案偶爾會調整,以最新公告為準。

如何在 WordPress 套用 justfont?

到 justfont 申請帳號、選好字型、取得 CSS 語法,把那段語法貼到 WordPress 後台「外觀 > 自訂 > 額外的 CSS」,再加上指定字型的 CSS 設定就完成了。不需要安裝外掛,也不需要動到主題程式碼。大部分佈景主題都有自訂 CSS 的區塊,直接貼進去就可以用了。

如果你在設計網站視覺的同時也想找好用的配色工具,可以順手參考 NIPPON COLORS 日本傳統色票,免費使用,拿來做網站配色靈感很夠用。

金城老師觀點

金城老師觀點

說實話,我自己的網站是用 Google Fonts,不是 justfont。你問我為什麼不用 justfont?我可能走極簡路線吧,我覺得預設的東西最好用,不是說預設就一定最好,是看你怎麼搭配,搭配得好什麼都是好用的。

我頂多就是用「思源明體」和「思源黑體」這兩個做搭配,其他全部用預設。這樣速度快、維護簡單,也不太容易出問題。

這裡要特別強調一件事:你在網站上套用的東西越多,速度就一定越慢,不管你優化了什麼都一樣。所以我的建議是,如果你的網站現在已經跑很順,先想清楚換字型對你有沒有實質差異,再決定要不要換。如果你的字體真的很難看,那才值得換,justfont 對這種情況是一個很好的解法。

延伸閱讀

參考資料

常見問題

justfont 免費版和付費版差在哪裡?

免費版可以使用部分開源字型(例如思源黑體),適合流量不大的個人網站。付費版可以使用 justfont 自家設計的進階商業字型,並享有更高的每月頁面瀏覽量額度。具體方案以 justfont 官方最新公告為準。

使用雲端字型會讓網站速度變慢嗎?

設定正確的話不會。雲端字型只傳送頁面實際用到的漢字資料,比起自己把整套字型檔案放在主機上讓訪客下載,反而輕量很多。

WordPress 要怎麼套用 justfont 的字型?

取得 justfont 提供的 CSS 語法後,貼到 WordPress 後台「外觀 > 自訂 > 額外的 CSS」,再加上指定字型的 CSS 設定即可。不需要安裝外掛,也不需要修改主題程式碼。

思源黑體和信黑體有什麼差別?

思源黑體是 Google 和 Adobe 合作開發的開源字型,完全免費,適合正文使用,閱讀起來清晰舒適。信黑體是 justfont 自家推出的字型,設計感更強,比較適合標題或視覺強調,使用需要付費訂閱。

手機瀏覽器也能正常顯示雲端字型嗎?

可以。justfont 的雲端字型是透過 CSS 套用,手機瀏覽器只要能讀取 CSS,就能正確顯示指定字型,不受裝置限制。

文章目錄