WordPress 自定義字體添加指南(區(qū)塊主題與經(jīng)典主題通用)

字體風(fēng)格在網(wǎng)頁(yè)設(shè)計(jì)中至關(guān)重要。統(tǒng)一且富有特色的排版不僅提升閱讀流暢性,也有助于強(qiáng)化品牌識(shí)別。相比系統(tǒng)默認(rèn)字體,自定義字體能更好契合視覺(jué)需求,是打造專業(yè)外觀的重要方式。

圖片[1]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體

本文介紹三種常見(jiàn)的 WordPress 字體導(dǎo)入方式,適配不同主題類型和操作習(xí)慣。

準(zhǔn)備字體文件

常用的網(wǎng)頁(yè)字體格式包括 .woff.woff2、.otf.ttf.eot。其中 .woff2 壓縮率高、兼容性強(qiáng),適用于大多數(shù)現(xiàn)代瀏覽器。

圖片[2]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體

如字體格式不符合使用要求,可在 Transfonter.org 等在線工具中進(jìn)行轉(zhuǎn)換。建議同時(shí)下載 .woff.woff2 兩種格式以提升兼容性。

方法一:使用站點(diǎn)編輯器上傳字體(適用于 WordPress 6.5+)

WordPress 6.5 新增字體上傳功能,需啟用區(qū)塊主題。

操作路徑如下:

  • 進(jìn)入“外觀 > 編輯器”
圖片[3]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
  • 打開(kāi)右上角的“樣式”設(shè)置,點(diǎn)擊“排版”
圖片[4]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
  • 選擇“管理字體”,點(diǎn)擊“上傳字體”
圖片[5]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
  • 選擇本地字體文件(支持 .woff、.ttf 等格式)
  • 上傳完成后,可在站點(diǎn)排版設(shè)置中選擇對(duì)應(yīng)字體
圖片[6]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體

此方式不用插件或代碼干預(yù),操作簡(jiǎn)潔。若需使用 Google Fonts,可點(diǎn)擊“安裝字體”,搜索Google Fonts字體并一鍵添加。

方法二:使用插件導(dǎo)入字體(適用于所有主題)

若站點(diǎn)未使用區(qū)塊主題或希望操作更加直觀,可通過(guò)插件實(shí)現(xiàn)字體導(dǎo)入。

推薦插件:

  • Use Any Font:支持上傳本地字體
  • Easy Google Fonts:適合快速接入 Google Fonts

使用 Use Any Font 插件步驟如下:

  • 安裝并啟用插件
圖片[7]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
  • 進(jìn)入插件設(shè)置頁(yè)面,申請(qǐng)并驗(yàn)證 API Key
圖片[8]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
  • 上傳字體文件并命名
圖片[9]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
  • 字體上傳成功后,將在站點(diǎn)排版菜單中出現(xiàn)
圖片[10]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
圖片[11]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體

插件方式適合大多數(shù)站點(diǎn)使用,設(shè)置簡(jiǎn)單,不管有沒(méi)有代碼基礎(chǔ)。

方法三:使用子主題手動(dòng)導(dǎo)入字體(適用于有代碼經(jīng)驗(yàn)的用戶)

如需更高自由度或不依賴插件的方式,可通過(guò)子主題實(shí)現(xiàn)字體導(dǎo)入。

步驟如下:

  • /wp-content/themes/ 下創(chuàng)建子主題文件夾
圖片[12]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
圖片[13]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
  • 添加 style.cssfunctions.php 文件,定義主題信息并引入父主題樣式
圖片[14]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
  • 創(chuàng)建 fonts 文件夾并上傳字體文件
圖片[15]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
圖片[16]-WordPress字體導(dǎo)入教程:三種方法實(shí)現(xiàn)網(wǎng)站自定義字體
  • style.css 中添加如下 CSS,可以加載你本地上傳的自定義字體。:
@font-face {
  font-family: 'CustomFont';
  src: url('fonts/CustomFont.woff2') format('woff2'),
       url('fonts/CustomFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'CustomFont', sans-serif;
}
  • 返回 WordPress 后臺(tái),啟用該子主題

此方法適合具備一定技術(shù)基礎(chǔ)的用戶,可實(shí)現(xiàn)更靈活的控制和定制。

總結(jié)

自定義字體有助于構(gòu)建統(tǒng)一風(fēng)格的網(wǎng)站排版。無(wú)論使用站點(diǎn)編輯器、插件,或是手動(dòng)操作,都可完成字體替換任務(wù)。結(jié)合站點(diǎn)所用主題與自身需求,選擇合適的方法進(jìn)行操作,有利于提升整體視覺(jué)效果和信息表達(dá)力。


聯(lián)系我們
教程看不懂?聯(lián)系我們?yōu)槟赓M(fèi)解答!免費(fèi)助力個(gè)人,小企站點(diǎn)!
客服微信
客服微信
電話:020-2206-9892
QQ咨詢:1025174874
郵件:info@361sale.com
工作時(shí)間:周一至周五,9:30-18:30,節(jié)假日休息
? 轉(zhuǎn)載聲明
本文作者:賊將鼠膽
THE END
喜歡就支持一下吧
點(diǎn)贊732 分享
評(píng)論 搶沙發(fā)

請(qǐng)登錄后發(fā)表評(píng)論

    暫無(wú)評(píng)論內(nèi)容