Elementor是一個強大的工具，它可以讓我們在擁有WordPress強大的後端支援之下，提供有效率的前端開發。

Elementor免費版本並沒有提供新增字型的功能，而Pro版本則是要付費

 

我在周年慶的時候有搶到半價的優惠買了三個站的license，也體驗到Pro版本的強大。Elementor在權限管理上做的還蠻嚴謹的，我曾嘗試用Pro版本先製作好版型，然後再Deactivate掉license，結果原本用Pro版做好的內容全部都變成空白了，沒有投機取巧的可能。

至於新增中文字形，Elementor Pro提供：WOFF、WOFF2、TFF、SVG、EOT等六種字形格式，教學網頁在這裡。

要使用Adobe Typekit的教學在這裡。

如果要使用Google Fonts, Early Access裡面的中文字形，則一樣要使用我們下面教學的方法。

本文開始

窮人是只能用免費版本的，要如何使用Elementor免費版 + 免費的Google網路字形來讓我們的網站生動一些是本文的目的。

需要有一點程式開發的基礎，稍微理解一點CSS。

1. Google Fonts Early Access:

這裡有一些些奇怪的地方，應該是Google對於字形的支援的政策有一些改變，所以網站上目前只能查到思源黑體這個字形。如果我們找一下早期關於Google fonts early access的文章可以發現其實是有提供六種字形的，包括：

  1. Noto Sans TC (Chinese Traditional) 思源黑體，
  2. cwTeXFangSong (Chinese Traditional) 仿宋體，
  3. cwTeXHei (Chinese-traditional) 黑體，
  4. cwTeXKai (Chinese Traditional) 楷體，
  5. cwTeXMing (Chinese Traditional) 明體，
  6. cwTeXYen (Chinese Traditional) 圓體

但是，雖然Google fonts early access網站上面沒有列出來，經過我的測試還是可以被使用的。首先，要準備我們的程式素材，根據Google的教學，import適當的url，然後針對每一個字形寫出你所需要的CSS類別，這裡我們幫大家準備好程式碼：類別名稱請自己取你覺得容易記憶的，或是你偏好的名稱，最後一項body則是把整個wordpress的預設字形改成思源黑體，字體大小18px。


/* 思源黑體 */
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

/* 圓體 */
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);

/* 仿宋體 */
@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);

/* 楷體 */
@import url(http://fonts.googleapis.com/earlyaccess/cwtexkai.css);

/* 明體 */
@import url(http://fonts.googleapis.com/earlyaccess/cwtexming.css);

/* 黑體 */
@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);

/* 圓體類別 */
.ctYen {
font-family: 'cwTeXYen', sans-serif;}

/* 仿宋體類別 */
.ctFangSong {
font-family: 'cwTeXFangSong', sans-serif;}

/* 思源黑體類別 */
.ctNotoScansTC {
font-family: 'Noto Sans TC', sans-serif;}

/* 楷體類別 */
.ctKai {
font-family: 'cwTeXKai', sans-serif;}

/* 明體類別 */
.ctMing {
font-family: 'cwTeXMing', sans-serif;}

/* 黑體類別 */
.ctHei {
font-family: 'cwTeXHei', sans-serif;}

body {
font-family: 'Noto Sans TC', sans-serif;
font-size: 18px;}

放進WordPress

WordPress 4.7版本以後提供客製化CSS的功能，這個功能解封了WordPress大部分的封印，讓我們可以不需要研究太深奧的WordPress程式架構，不用使用ftp login進伺服器改程式碼，同時也擺脫對很多外掛的依賴。

由「控制台」–> 「外觀」–>「主題編輯器」點即進入，通常看到的會是你的Theme的編輯畫面，我們現在做的CSS改變是跟著Theme的，如果你更換了Theme則現在寫的CSS就會不見，需要重寫一遍。

在以前會使用Theme所提供的佈景主題檔案，寫在style.css裡面，然而當我寫這份文件的時候，系統已經建議我們使用[外觀>自訂>附加的CSS]這個選項來修改。同時，經過我的測試，寫在style.css內並不會產生效果，而Astra網站上對於自訂CSS也建議改用系統所提供的方式進行，不用再寫在sytle.css裡面。

所以我們開啟[外觀>自訂>附加的CSS]，直接把上面的程式碼寫進去，然後按下發表即可完成字形的安裝(PS: 這裡很抱歉，我的網站設定簡單的防拷，所以簡單的copy&paste是沒有作用的，需要你們重新打一遍程式碼)。

 

放好以後可以做一點簡單的測試，譬如我們上面寫六種google中文字形時就已經套用的新的格式，這是透過文字編輯模式(html編輯)來完成的。使用文字編輯模式，找到你想要改的區塊，加上css的類別名稱即可，如：在這行敘述中，我們加上class=”ctFangSong”，使用剛剛設定的仿宋體類別來顯示中文字形。


<li class="ctFangSong">cwTeXFangSong (Chinese Traditional) <strong>仿宋體</strong>，</li>

在Elementor中使用自訂的中文字體

先利用Elementor先拉一些測試的頁面，這邊我們使用標題(T)，本文編輯器，以及按鈕(Button)建立一個測試頁面

 

在Elementor中，如果需要改中文字形，在widget的使用上使用本文編輯器或是</>html會比較方便。選取一個本文編輯器的方塊框以後，例如第一個「中文字形測試，楷體」，點選【進階】，在CSS類別欄位內輸入你想要使用的中文字形類別，然後按下【Publish】(或是【Update】)就可以了。輸入類別的時候不需要打前面的「.」。

 

這邊沒有所見及所得的功能，所以你做的改變不能夠馬上看到實際的效果，需要使用【Preview】功能直接看成果的樣子。

接下來可以一樣處理圓體和思源黑體。

查看成果

 

但是，使用Elementor就是為了要使用他強大的Widget，要更改Topic和Button上面的中文字形會稍微複雜一點，我們放到下一篇文章說明。

在WordPress + Elementor上使用中文字型(二)

This Post Has 6 Comments

  1. Yvonne 13 6 月 2018 回覆

    感謝這篇文章寫得很清楚，有小發問想請教，我也想要更改網站上的字型，但在我的功能欄上找不到[外觀>自訂>附加的CSS]，只有自訂（佈景主題）但無法進一步修改CSS，修改CSS是只有付費會員能使用的功能嗎，感謝回答:)

    1. hhliu 2 7 月 2018 回覆

      通常在【自訂】的最下面一項就是【附加的CSS】，或是英文【Custom CSS】，非付費會員就能使用，是Wordpress自帶的基本功能。

  2. steven 4 10 月 2018 回覆

    抱歉我不是前端人員，所以不熟css，可否請教一下，li那一段的宣告，是在文本編輯器裡切成文字模式，直接寫在section的最上頭嗎？

    1. hhliu 10 10 月 2018 回覆

      那一行是html語法，我用來顯示在文章中『2. cwTeXFangSong (Chinese Traditional) 仿宋體，』用來顯示字型的語法，應該不是你說的情況。

  3. jessica 19 3 月 2021 回覆

    您好，我想問一下那段html語法我該放在哪裡呢?

    1. hhliu 19 3 月 2021 回覆

      你指的是測試碼那一段? 編寫文章的時候用html原始碼方式寫進去測試，用elementor或是wordpress原本的編輯器測試都可以

發佈留言