Elementor 如何設定中文字型

1. Elementor 內建哪些中文字型？

Elementor 3.0 版以後已經內建下列的 google fonts 中文字型：

黑體（繁）
Noto Sans TC
Noto Sans HK

黑體（簡）
Noto Sans SC

宋體（繁）
Noto Serif TC

宋體（簡）
Noto Serif SC

2. 如何設定網站的中文字型？

2.1 在 Elementor 編輯模式下，點選左上角的漢堡圖示（Ξ）-> Site Settings -> Design System -> 全域字型
將主要、次要、文本、摘要的 [字型系列] 設定為 Noto Sans TC，[重] 分別設定為 900, 700, 400, 500

2.2 點選 Theme Style 的 [排版]
將 Body, H1, H2, H3, H4, H5, H6 的 [重] 分別設定為 400, 900, 700, 500, 400, 300, 200

如果你覺得一個一個設定太麻煩，你可以⋯⋯

3. 用 Custom CSS 快速設定中文字型

把下面的程式碼直接複製到 [Site Settings] -> [自訂 CSS]

/* google fonts */
body, p, a
{
font-family: 'Noto Sans TC', sans-serif;
font-weight: 400;
}
h1 {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 900;
font-size: 2em;
}
h2 {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 700;
font-size: 1.7em;
}
h3 {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 500;
font-size: 1.5em;
}
h4 {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 400;
font-size: 1.3em;
}
h5 {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 300;
font-size: 1.2em;
}
h6 {
font-family: 'Noto Sans TC', sans-serif;
font-weight: 200;
font-size: 1.1em;
}

4. 改用負擔較輕的 adobe 中文字型(optional)

4.1 如果你覺得 google fonts 太肥大，你想改用負擔較輕的 adobe 中文字型，可以把下面的程式碼直接複製到 [Site Settings] -> [自訂 CSS]

/* adobe fonts */
body, p, a
{
font-family: source-han-sans-traditional,sans-serif;
font-weight: 400;
}
h1 {
font-family: source-han-sans-traditional,sans-serif;
font-weight: 900;
font-size: 2em;
}
h2 {
font-family: source-han-sans-traditional,sans-serif;
font-weight: 700;
font-size: 1.7em;
}
h3 {
font-family: source-han-sans-traditional,sans-serif;
font-weight: 500;
font-size: 1.5em;
}
h4 {
font-family: source-han-sans-traditional,sans-serif;
font-weight: 400;
font-size: 1.3em;
}
h5 {
font-family: source-han-sans-traditional,sans-serif;
font-weight: 300;
font-size: 1.2em;
}
h6 {
font-family: source-han-sans-traditional,sans-serif;
font-weight: 200;
font-size: 1.1em;
}

4.2 然後將你的 Adobe Project ID 填入 elementor 的設定即可

1. Adobe Project ID 可以在這裡找到
   https://fonts.adobe.com/my_fonts#web_projects-section
2. 在 Elementor 的 [設定]->[整合]->Adobe Fonts (TypeKit) 中填入你的 Project ID