Webフォントは、ファイルの配置場所とCSSの参照先を合わせて読み込みます。
ここでは子テーマのstyle.cssと同じ階層に太字のフォントを置き、指定したブロックだけに適用する方法を説明します。
サイト全体の書体を変更するコードではありません。
フォントを子テーマに配置する
Web配信が許可されたフォントを用意します。
例はKaisei OptiのBoldです。
フォントのライセンスを確認し、子テーマのstyle.cssをバックアップしたうえで、同じディレクトリにKaiseiOpti-Bold.ttfをSFTPなどで配置してください。
親テーマへの直接追加は更新で失われる場合があります。
style.cssに読み込みと適用先を書く
@font-face {
font-family: "WazaKaiseiOpti";
src: url("./KaiseiOpti-Bold.ttf") format("truetype");
font-style: normal;
font-weight: 700;
font-display: swap;
}
.waza-webfont {
font-family: "WazaKaiseiOpti", serif;
font-weight: 700;
}この相対URLは、読み込まれるstyle.cssの位置が基準です。
「追加CSS」などページ内に出力されるCSSに貼る場合は、実際のフォントファイルのHTTPS URLに置き換えてください。
WordPressをサブディレクトリに設置しているサイトでは、そのパスも含めます。
適用する見出しや段落ブロックの「高度な設定 → 追加CSSクラス」に、ドットを付けずに waza-webfont を入力します。
太字は font-weight: 700、通常の字形は font-style: normal で指定します。
font-style: bold は無効です。
読み込めない場合の確認と戻し方
公開画面の開発者ツールで、追記したstyle.cssが読み込まれ、対象ブロックにwaza-webfontクラスが付いていることを確認します。
続いてNetworkでフォントのリクエストを確認します。
404ならURLや大文字・小文字、別ドメインならCORS設定、コンソールにデコードエラーがあればファイル形式を確認してください。
HTTP 200はファイル取得の成功を示すもので、目的の文字にそのフォントが使われたことまでは保証しません。
font-familyの計算値だけでなく、実際に描画されたフォントも確認します。
日本語のTTFは容量が大きくなることがあります。
配布元がWOFF2を提供している場合は利用を検討し、拡張子だけを変えず、実際の形式とformat指定を一致させます。
font-display: swapでも転送量は減らないため、スマートフォン回線で表示の切り替わりを確認してください。
戻す場合は追加CSSクラスと今回のCSSを外し、バックアップとの差分を確認します。
フォントファイルは他の場所から使われていないことを確認してから整理します。
旧記事の「このページの見出しが見本」という説明は撤回しました。
現行サイトの共通フォントはこの例とは別です。
2026年10月1日の確認では、既存フォントファイルがHTTP 200で取得できることを確認しています。
掲載コードを導入した際の実際のフォント描画は未確認です。
仕様：MDNの@font-face。
他のレイアウト例はレスポンシブなカラムの作り方を参照してください。
