Luxeritas(ルクセリタス)にWebフォントを追加する方法とは?

2021-07-12

眉毛を追加する女の子

こんにちは、しのです。

今回の記事では、WordPress(ワードプレス)のテーマ「Luxeritas(ルクセリタス)」において、Webフォントを追加して利用できるようにする方法を解説します。

前置き

ルクセリタスでは、管理画面の「Luxeritas」→「カスタマイズ(外観)」→「字体(フォントファミリー)」より、様々なフォントがすでに選べるようになっています。

今回の記事では、上記から選択できるフォント以外のWebフォント追加する方法を解説していきます。

Webフォントの追加方法とは?

Webフォントの追加方法を、順を追って解説していきます。

①準備

まず、追加したいWebフォントの「linkタグ」「font-family記述」を準備します。

下記、「GoogleFont」の例です。

②子テーマに「linkタグ」を追記

次に、子テーマに「linkタグ」を追記していきます。

管理画面から「Luxeritas」→「子テーマの編集」→「Headタグ」を選択して、「?>」以降の行に①で準備したlinkタグをコピペします。

これで、Webフォントの読み込みが完了です。

③フォントの指定

②で読み込ませたフォントをcssで指定します。

管理画面から「Luxeritas」→「カスタマイズ(外観)」→「追加CSS」を選択肢、「body」のプロパティに①の「font-family設定」を記載します。

body{
	font-family: 'Yusei Magic', sans-serif;
}

これで完成です。

補足

上記作業を行っても反映されない場合は、キャッシュを無視して再読み込みを行うスーパーリロード(Chromeなら[Ctrl]+[Shift]+[R]キー)を試してみて下さい。

終わりに

以上です。

さよなら~