WordPress 使用系統字型

在 WordPress 的字型運用有非常多的方法，我個人一直偏愛使用系統字型，其原因，系統字體就像網路基本字型一樣工作，而不需要瀏覽器的第三方 (Google Font) 任何下載時間，讓網頁載入更快。

System Font

外觀 > 自定 > 附加的 CSS，把代碼寫在裡面，或是利用 Code Snippets 外掛來添加代碼也可以。

body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
h1,h2,h3,h4,h5,h6 {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

Code Snippets 外掛的寫法：

add_action( 'wp_head', function () { ?>
<style>
	body {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
	h1,h2,h3,h4,h5,h6 {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
	
	body, p {font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
</style>
<?php } );

Code Snippets

Theme

上面的代碼是最基本的，但這會因你所用的佈景主題不同，代碼會有所增加，可以利用 Chrome DevTools 來查看 CSS 樣式。

Disable Google Fonts

接下來還需要「禁用」從 WordPress 佈景主題加載的任何第三方字體，例如：Google Fonts。

這又可能有所不同，因為每個開發人員會以不同的方式包含字體，但現在許多佈景主題都有輕鬆的方法來打開或關閉 Google Fonts。

或者，使用 Disable Google Fonts 外掛來禁用 Google Fonts。

Disable and Remove Google Fonts