在 OpenCart 網站中自訂客戶瀏覽時的字型，可以透過修改主題的 CSS 文件來實現。以下是詳細的步驟與程式碼範例：
1. 確定字型資源
使用 Google Fonts：
到 Google Fonts 選擇你需要的字型。
點擊選中的字型後，複製嵌入的 <link> 標籤或 @import 程式碼。例如：
html
複製
編輯
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
自訂字型文件：
如果你有自訂字型文件（如 .ttf、.woff），上傳到網站的 /catalog/view/theme/<主題名稱>/stylesheet/fonts/ 目錄。
在 CSS 中使用 @font-face 定義自訂字型，例如：
css
複製
編輯
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.woff2') format('woff2'),
url('fonts/mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
2. 修改主題的 CSS 文件
找到主題的 CSS 文件：
路徑通常是：/catalog/view/theme/<主題名稱>/stylesheet/stylesheet.css。
添加自訂字型樣式：
編輯 stylesheet.css 文件，加入以下代碼：
css
複製
編輯
/* 使用 Google Fonts 的範例 */
body {
font-family: 'Roboto', sans-serif; /* 替換為你選擇的字型名稱 */
}
/* 自訂字型的範例 */
body {
font-family: 'MyCustomFont', Arial, sans-serif; /* 替換為你的字型名稱 */
}
/* 如果需要不同區塊使用不同字型 */
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
}
p {
font-family: 'MyCustomFont', serif;
}
3. 更新主題的頭部文件
如果使用 Google Fonts，需要將字型的 <link> 標籤加入主題的 header.twig 文件：
路徑：/catalog/view/theme/<主題名稱>/template/common/header.twig。
在 <head> 標籤內加入：
html
複製
編輯
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
4. 清除快取
在 OpenCart 後台，前往 Dashboard > Developer Settings（開發者設定）。
點擊 Clear Theme Cache 來清除快取，確保新樣式生效。
範例程式碼總結
stylesheet.css 添加：
css
複製
編輯
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.woff2') format('woff2'),
url('fonts/mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Roboto', sans-serif;
}
h1, h2 {
font-family: 'MyCustomFont', serif;
}
header.twig 添加：
html
複製
編輯
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
測試字型
完成上述步驟後，刷新瀏覽器並檢查網站字型的顯示效果。
如果字型未生效，檢查字型資源的路徑是否正確，或使用瀏覽器的開發者工具確認 CSS 是否正確應用。
