【WordPress】プラグインなしのフォントの変更でより簡単に読みやすく!【CSS】

ワードプレスのフォントを変える方法

ウェブフォントはサイト内で使用可能なフォントを簡単に追加できる人気の方法です。自分でファイルをアップすることも可能ですが、ウェブフォントなら自分のサーバー上になくてもいろいろなフォントが選べるようになり、ファイルが更新された時も提供者側が更新したバージョンに自動更新されることになります。

Google FontsはGoogle提供の無料ウェブフォントサービス。様々な言語のフォントにも対応しています。
Adobe Edge web FontsもAdobeによるフォントで無料で利用できます。
今回はGoogle Fontsを例にして話を進めていきます。

WEBフォント(Google Fonts)の追加方法

ウェブフォントはコードを追加するかプラグインをインストールするだけで使えるのでファイルをアップするよりも簡単に追加できます。
またかなり多くのフォントから選べ、何もしなくても新しいバージョンにアップデートされるため管理も簡単です。

プラグインを増やしたくない場合はfunctionsファイルとスタイルシートにコードを追加し使用できます。

まずGoogleフォントで使いたいフォントを選び+で追加していきます。
すると右上の「Hide your selected families」に追加されていくので、開くと「Use on the web」でlinkやimportでもURLにフォント名が入ったURLが描かれているのでそのURLをコピーします。

フォント

functionsファイルとCSSファイルにコードを追加する

まずはfunctionsファイルに次のような形でフォントを読み込むコードを書きます。
function kinsta_add_google_fonts() {
 wp_register_style( 'googleFonts', 'コピーしたURL');
 wp_enqueue_style( 'googleFonts');
}
add_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );
そしてCSSには
body {
 font-family: '選んだフォント名', sans-serif;
}

h1, h2, h3 {
 font-family: '選んだフォント名', serif;
}

またはよく見かけるフォント名を入れて、

body {
 font-family: '選んだフォント名', Georgia, sans-serif;
}
という形にしておくと、自分が選んだフォントがない場合に2番目ののフォントで表示され、さらに無い場合はserifとsans-serifで表示される、と言った構成にも出来ます。
自分は見ることが出来ても訪問者の人は選んだフォントを持っていない可能性もありますので、表示されなかった時のために予備のフォントを入れておくことも大事です。こうすることで自分が想定していたフォントと異なったフォントでサイトを表示させてしまうのを回避することにも繋がります。

まとめ

今回はワードプレスでのフォントの追加についてまとめてみました。
自分のサイトに合うフォントを選び、見栄えの良いサイト作りを目指しましょう!

見るブラウザによってフォントに違いが出てしまう問題の解決方法はコチラ!

【WordPress使い方】PCとスマホでフォントが変わってしまう?【疑問】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です