こんにちは。SaitoKouです。
Elementorを使用したWebサイト制作をしていた際に、游ゴシックを使いたいと思っていたのですがデフォルトの機能ではフォントの一覧に游ゴシックはありませんでした。
CSSで全体に適用するのはちょっと微妙なので、フォント一覧に游ゴシックを追加できないか調査しました。
この方法はElementor無料版でもPro版でも使用可能ですので、同じように困っている方は参考にしてください！
Elementorのフォント選択
Elementorでは、サイト設定や見出しブロック、テキストブロックにて「タイポグラフィ」からフォントを選択することができます。
「フォント」を選択するセレクトボックスをクリックすると、使用できるフォントがずらっと出てきますが、今回使用したい「游ゴシック」は出てきません。
今回はこのフォント一覧に游ゴシックを追加し、Elementorで選択可能にします。
functions.phpにコードを追加する。
functions.phpの末尾に以下コードを追加します。（PHPファイルの編集は、必ずバックアップを取って慎重に行ってください！また、編集は子テーマへ実施しましょう！）
<?php //←この行はいらないです。
/**
* フォント一覧の一番上に「Custom」フォントグループを追加
*/
function astra_add_custom_font_group($font_groups) {
$new_font_group = array( 'custom' => __( 'Custom' ) );
return array_merge( $new_font_group, $font_groups );
}
add_filter( 'elementor/fonts/groups', 'astra_add_custom_font_group' );
/**
* Customフォントグループにフォントを追加
*/
function astra_add_additional_fonts($additional_fonts) {
$additional_fonts['Yu Gothic'] = 'custom';
$additional_fonts['Yu Mincho'] = 'custom';
$additional_fonts['Meiryo'] = 'custom';
return $additional_fonts;
}
add_filter( 'elementor/fonts/additional_fonts', 'astra_add_additional_fonts' );
動作確認
追加したコードによって、Elementorのフォント一覧に游ゴシックが登場しました。
これでElementorのフォント一覧から選択し、デザインに反映できるようになりました。今回は日本語サイトだとよく使われる游明朝とメイリオも一緒に追加しています。ほかのフォントも同じ要領で追加できます。
Pro版だと「カスタムフォント」という機能でフォントの追加ができるのですが、その機能を利用するとフォントファイル一式をWordPressにインストールすることになります。ただ游ゴシックは基本的にどのPCにも搭載されているフォント化と思いますので、子テーマ化などの知識は必要ですが今回の方法で游ゴシックを有効化できたほうがサーバーの容量を圧迫しなくて良いかもしれません。
まとめ
今回は游ゴシックをElementorのフォント一覧から選択できるようカスタマイズを行いました！
日本語のサイトではよく使われるフォントなのですが、Elementorの標準機能としては搭載されていなかったので困っている人もいたのではないかと思います。良ければ参考にしてください！
