初心者にオススメ！Easy Google Fontでブログのフォントを変えてみよう。

ブログを始めたばかりだったり設定に慣れていないと、フォントを変えるのって大変そうに感じませんか？WordPressでは、自分の好きなフォントを画面上で確認しながら選べる、「Easy Google Font」というプラグインがあると聞いたので、ここでは実際に試しながら方法をまとめます。

スマホで見た時のフォントに納得がいかない

このブログのデザインは有料テーマJINを使って運営しています。何か触ってしまったのか、スマホで見たときのフォントが明朝体で自分のイメージとは違かったので、変えてみようと思います。

なんとなく「ブログ始めたばかりです」感を感じます。実際そうなんですが。

Easy Google Fontをインストールする

早速、Easy Google Fontをインストールしていきましょう。

Easy Google Fontで検索

ダウンロード

Easy Google Fontを使う

ダウンロードができたら早速使っていきます。

非常にシンプルなプラグインなので安心してください。

カスタマイズを押すと現在使っているテーマがでてくるので、「Typography」を押す。

使い方

文章の文字を編集する

「Paragraphs」のEdit Fontタグを押すとページ内の文章のフォントを編集できます。

hタグを編集する

「Heading」のタグを押すとhタグのフォントを編集できます。Heading1は<h1>、Heading2は<h2>といったように連携しています。

字体を変える

「Style」のタグ、Font Familyからお好みのフォントを選んでください。

今回私は Noto Sansをチョイス。

カスタマイズをしながらフォントがどのように変更されるか確認しながら選べるという情報を見たのですが、私のカスタマイズ画面ではフォントをいじっても変更されている様子がなかったので、馴染みのあるフォントでトライ。

色、大きさを変える

「Appearance」で文字の色、大きさを調整できます。Font Colorで色の変更ができることは確認できたのですが、サイズ、スペースはカスタマイズ画面上では変更しながら調整できなかったので、今回はそのままにしました。

指定の場所を空ける（マージン、パディング等）

文字の位置を調整するには「Positioning」で編集できます。

マージン、パディングをいじると調整できます。全体的に画面端から文章の始まる位置を放したい時に調整すると良いでしょう。

変更後を確認する

スマホでどのように映るか確認します。   

 

変更できました。が、太字で設定した箇所のフォントが変わっていないので、CSSを手動で変更する必要があります。