■フォントをサーバへアップロード
例1）MPLUSRounded1c-Regular.ttf’
例2）MPLUSRounded1c-Bold.ttff
■スタイルシートに下記を記述してフォントを読み込む
@font-face {
font-family: 'Mplus';
font-display: swap;
src: url('/wp-content/themes/customify/fonts/MPLUSRounded1c-Regular.ttf') format('truetype'),
src: url('/wp-content/themes/customify/fonts/MPLUSRounded1c-Bold.ttff') format('truetype');
}「font-family: ‘Mplus’;」は任意で分かりやすい名前を付ける。
カンマ区切りで複数読み込み可能。
「font-display: swap;」はフォントが利用可能となるまでの間、そのフォントが適用されているテキストには代替フォントが適用するという記述。
■CSSにフォントを定義
p {
font-family: Mplus!important;
font-weight:bold;
}そのまま使うとWEBフォントが適用されるまで読み込み時間がかかるので
WEBフォントを先に読み込みさせるために、heaterに
<link rel="preload prefetch" as="font" type="font/truetype" href="/wp-content/themes/customify/fonts/MPLUSRounded1c-Regular.ttf" crossorigin>を記述する。