找我們做網站
↑
Resources · 免費字型

Google Fonts 中文字型下載與網頁字體設定:找出網站用什麼字

免費字型發布 2018.05.27更新 2026.10.02閱讀約 7 分鐘
Google Fonts 中文字型下載與網頁字體設定:找出網站用什麼字

重點整理
挑字型可以到 Google Fonts 搜尋中文字型(例如思源黑體 Noto Sans TC、思源宋體),再用 CSS 套用到網站;想知道別人網站用什麼字,可用 Chrome 擴充功能快速查看。原文提到的 Early Access 頁面已關閉。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定,一個好的網站,所必須具備的要素有很多,而網站字體這個部分常常會被忽略,如果說圖片能幫助使用者快速了解網站內容,那麼文字就是網站內涵深度的體現,如果說沒有選擇適合的字體來呈現文案內容,造成使用者在閱讀上的困難,那麼再動人的詞彙,再吸引人的文字涵義,都無法真正打動使用者的心。
以下是在 WordPress 後台中編輯文字的圖片,字型的部分可以在紅色方框標示處做選擇,如果說沒有另外安裝字型,可以選擇的字型就只有網站預設的選項。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

下圖是筆者將常用的字體用同樣的文字內容在網頁上呈現,每一種字型所呈現的樣式都有適合與不適合的部分, Arial black 就相當適合強調英文字體時使用,在同時具有英文與中文的段落中會自動將英文以粗體呈現,而 Impact 適合網站風格屬於活潑前衛的感覺。 Microsoft JhengHei(微軟正黑體)則適合於比較正式常規的內容。因此選擇對的字體可以為網站增加更具有特色的主要樣式,為網站加分。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

基於字體選擇對網站的重要性,鵠學苑在這篇教學文章中將各位同學說明最新 Google 字體 的查找以及下載位置,包含了2017年釋出的開源字體:思源宋體( Noto Serif CJK ),具有簡約大氣,適合文學作品及長篇文章的特點,另外還有釋出 5種免費中文字體,雖然還在測試階段,但一樣可以下載並透過 CSS 樣式表在網站上呈現,分別是:

  • 圓體字 – cwTeXYen
  • 仿宋體字 – cwTeXFangSong
  • 楷體字 – cwTeXKai
  • 明體字 – cwTeXMing
  • 黑體字(思源黑體)– Noto Sans TC

(小提醒:鵠學苑的所有教學均是以 Apple Mac OS X 系統 做步驟示範!)

Google字體介紹及下載方式

第一步:進入到 Google Noto Fonts 網站,在下圖中可以看到紅色方框標示的搜尋欄位。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

第二步:輸入 Noto Serif CJK 搜尋思源宋體。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

第三步:可以看到 Noto Serif CJK 思源宋體有不同的呈現樣式,區分為 BLACK 、LIGHT 等字體,在安裝時可以自行選擇該樣式的字體檔案在網站中使用。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

第四步:另外的五種字體可以在 Google Fonts Early Access 這個網站中找到,在右上角輸入Chinese Traditional 以快速搜尋。
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

第五步:在這裡以 Noto Sanc TC 黑體字(思源黑體)作為範例,在圖片中央以紅色方框標示的區塊中, Link 的 CSS 程式碼是用來定義在網站中匯入 Noto Sanc TC 這個字體,Example則是 指定網站內元素呈現 Noto Sanc TC 這個字體。

Link:@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
Example:font-family: 'Noto Serif Khmer', serif;
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

快速查看WordPress網站字體樣式

第一步:進入到 Chrome 線上應用程式商店,在右上角的搜尋框中輸入 WhatFont ,可以找到如下圖二的畫面。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

第二步:點擊圖片會有應用程式的簡單介紹,接者點按右上角的 ADD TO CHROME 安裝應用程式到瀏覽器。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

第三步:在網址列旁應用程式區塊會有黑色 f 字樣的按鈕。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

第四步:點擊後會開啟應用程式功能,當移動滑鼠時就會顯示這個網頁中文字的字體、大小、顏色、行高、字寬等詳細資訊。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

可以參考實際操作影片:

第五步:另外如果說希望為英文的文字呈現不同的字體,也可以到 Google Fonts 這個網站來查看字體樣式,Google Fonts有超過800種字體可供選擇,相信一定可以找到你想要的字體。

Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定
Google 字體 下載 WordPress 字體 快速分析 網頁字體 設定

原文提到的 cwTeX 字型和 Early Access 頁面還在嗎?

原文介紹的 Google Fonts Early Access 頁面已經關閉,網址會導回 Google Fonts 首頁,Google Noto 舊網址也已轉到 Google Fonts。因此:

  • 思源黑體、思源宋體請直接在 Google Fonts 搜尋 Noto Sans TC、Noto Serif TC 使用。
  • 原文的 fonts.googleapis.com/earlyaccess/… 引入寫法已不建議使用,請改用 Google Fonts 目前提供的引入程式碼。
  • cwTeX 系列字型不再由 Google Fonts 提供,若仍想使用需另找來源,並確認授權與檔案大小是否適合網頁使用。

常見問題

Google Fonts 有哪些免費中文字型?

Google Fonts 上常用的繁體中文字型有思源黑體(Noto Sans TC)與思源宋體(Noto Serif TC),另有幾款風格字型可以搜尋語言「Chinese (Traditional)」篩選。這些字型都可以免費用在網站與商業用途,授權以字型頁面標示為準。

Google Fonts 中文字型要怎麼套用到網站?

在 Google Fonts 選好字型與字重後,複製提供的 link 標籤放進網站的 head,或用 CSS 的 @import 引入,再用 font-family 指定要套用的元素。WordPress 使用者也可以用佈景主題的字型設定或 Elementor 的全域字型直接選擇。

要怎麼知道別人的網站用什麼字型?

可以安裝 WhatFont 這類 Chrome 擴充功能,啟用後把滑鼠移到文字上就會顯示字型名稱、大小與顏色。也可以在文字上按右鍵選「檢查」,在開發人員工具的 Computed 頁籤查看 font-family 與實際使用的字型。

結語

最後要跟各位做一個提醒, Google Fonts Early Access 中提供的字體都是測試版本,也就是説當測試完畢後可能會將其字體加入到正式的Google Fonts網站,也有可能直接被移除,其移除並沒有一定的標準,也許是太少人使用,或者對於增加文字可閱讀性或獨特性沒有太大幫助,因此如果說各位同學在下載字體時發現該字體搜尋不到,那麼就表示已經被移除了。

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。