Webフォントを使う理由

Webブラウザでページを表示する際、フォントはCSSで指定されたものを使って表示します。どう指定されているかは、「開発ツール」で見てみるとわかります。

Hiragino Kaku Gothic ProN, Meiryoなどと指定されています。この中であるものを使って表示します。ですので、表示する環境によってフォントが違い、見え方が変ります。この指定だと、大抵の場合、MacOSならHiragino Kaku Gothic ProN、WindowsならMeiryoで表示されるでしょう。

でも、本当なら、環境によらず、同じように見えて欲しいもの。##Webフォント##を使えば、それが実現できます。

Google Fontsを使う

Webフォントにはいろいろありますが、ここでは無料で利用できるGoogle Fontsを使うことにします。

非常に沢山の種類があるのですが、日本語で使えるものは残念ながらあまり多くはありません。日本語対応のものは、こちらの説明がわかりやすいと思います。

WordPress用のプラグイン

フォントを指定する場合、通常はCSSファイルに書きます。WordPressで使うならテーマのカスタマイズの「追加CSS」で指定すればおそらく使えるだろうと思います。

「でも、WordPressならプラグインがあるはず」と思って探したら、やはりありました。

この中の下の方、「Easy Google Fonts」をインストールしました。理由は簡単。説明が日本語だから。それに、インストール数もこっちの方が圧倒的に多いです。

テーマのカスタマイズ

「Easy Google Fonts」を有効化したら、テーマのカスタマイズの中に「Typography」という項目が追加されました。

その下は、「Default Typography」。一つしかありません。何か設定をすると増えるのだろうと想像しますが、まずは、このままで。

その先は、こうなっています。

Paragraphsは記事本文、Heading 1はH1見出し、Headeing 2はH2見出しのそれぞれのフォントの設定のようです。Heading 3以下も同様でしょう。

まずは、Paragraphsのメニューを開きます。

Font Familyは日本語に対応しているフォントの中から選びます。Font Weight/Styleを適宜調整します(フォントによっては選択肢が一つしかないものもあります)。その他、Text Decoration、Text Transformもありますが、あまり使いみちがなさそうです。設定してみればその場で変化するのですぐわかります。

さらに、「Appearance」タブでは、フォントの色やサイズ、行間などを調整できるようです。スライドバーを動かせばOKです。元に戻す際(変更しない場合)は「Reset」で。

「Positioning」タブでは、マージンやパディングなどを調整できます。これは結構便利。

変更例

まずは、変更前の表示。

今使っているテーマ(TIJAJI)では、元々Google Fontを使うようになっていました(Noto Sans Japanese)。

続いて、「M PLUS 1P」に変えたもの(見出しは「M PLUS 1P MARU」)。

わずかな変更ですが、雰囲気が変りました。でも、元々のNoto Sansの方が好みかな…。

コメントを残す

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


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)