ブログタイトルのフォントを変更する手順　Google Fonts　

ブログタイトルのフォントを変えたいけど、方法が良くわらず、どこで変えたらよいかわからないといったことに対して、手順を記載します。

最初は以下の状態ですが、

手順を行うと、以下になります。

ちょっと、わかりづらいかもしれませんが、左上のタイトルの文字の雰囲気（フォント）が変わっていますね。

変更手順について記載していきます。

前提として、Wordpress　& 　Cocoon　であることとしています。

まずは、フォントを決めます。

Google Fontを利用します。

Googleで”google fonts”と検索します。

サイトを開くと、以下のような画面になります。

ここで表示されるフォントを選択します。

その前に日本語に変更したい場合、以下で選択します。

そうすると、日本語のみとなりました。
※フォントの中には日本語が無いものあるため、日本語を使用する場合、選択しましょう！

自分が変更したいタイトルを入れてどのように変わるか確認します。
↓以下の図では、”ふぃくらはぎ”と入力しています。

気に入ったフォントを選択クリックすると以下の画面になります。

先ほどの画面にある、”Select this style”をクリックすると、以下の画面が表示されます。

ここ表示される以下のボックスの中にある「<link ～」※★１の部分と、「font ～」※★２の部分はコピーして、自分のサイトにペーストすることになります。
※後ほど、貼り付ける部分は、★１と★２で異なります。

自分のサイトに戻り、テーマエディターをクリックします。

画面の右の方に、編集するテーマを選択で、「Cocoon」とし、テーファイルの中から、
「Theme Header」をクリックします。

以下の画面で、先ほどコピーした「<link ～」★１を以下のように貼り付けます。
※<!– Preload –>の下の行に貼り付けます。
※元々表示されている文字は、絶対に消さないください。サイトが文字化けや型崩れなどなど、大変なことになります。注意して貼り付けてください。

コピーが終わったら、一番下の”ファイルを更新”をクリックします。

続いて、以下の画面のようにヘッダーをクリックします。

左側に表示された中から、”追加CSS”をクリックします。

表示された画面下の枠に、「font ～」★２を貼り付けるんですが、もう少し修正が必要です。

上記のように、「.logo～」といった文字も必要になります。
上記をコピーして、★２と合わせて以下のように入力し、”公開”をクリックします。

そして自分のサイトを更新してみると、タイトルのフォントが変更になりました。

以上です。

Follow me!

@msfiku