【WPカスタマイズ】誰でも3分でできるWEBフォントの設定

 

割りとずっと表示されているフォントが微妙だな〜なんて思っていて…。

しかも私MacとWindows両方使うことがしばしばあるんですが、なにも設定していないとウェブ表示もフォントがそれぞれの端末によって異なるので、違和感が…。

それが気持ち悪かったので、今回思い切ってこのサイトのフォントをWebフォントに変えちゃいました!
めっちゃかんたんで本当に3分もかからずに終わったので、Webフォントの設定手順を書いていきます!

 

使いたいフォントを選びましょう

Google Fonts + 日本語 早期アクセス

 

私が今回使用したのはGoogle Fonts + 日本語 早期アクセス です。

Google Fonts + 日本語 早期アクセス は9種類のフォントから選べ、さらにフォントの太さもそれぞれ調節できるので、かなり使い勝手がいいです。
また、Google Fonts + 日本語 早期アクセス は、コードをぺっぺと貼り付けるだけでかんたんに使えちゃいますので、設定がらくちんです♪

 

まずは、この9種類のフォントの中から使いたいフォントを選びましょう。
私は、ブログを柔らかい雰囲気にしたかったので、「Rounded M+ 1c」を使うことにしました!

 

Google Fonts + 日本語 早期アクセス Rounded M+ 1c

 

今の自分のブログの設定を見てみよう

 

今の自分のブログの設定をコンソールを活用して見てみましょう。

 

WPブログ フォント(旧)

 

私の場合、テーマのデフォルトの設定になっています。

今回私が変えたいのは、自分のブログの全てのフォントなので、このbody に設定されている「font-family」をまるっと上書きしちゃいます。

 

ブログにWebフォントの設定をしていく

 

では、はりきってWebフォントの設定をしていきましょう!

Google Fonts + 日本語 早期アクセス先生は大変親切なので、これ貼って使ってね〜というコードをわかりやすく書いていてくれています。

Google Fonts + 日本語 早期アクセス コード

 

ちょうどこの赤枠で囲った2行です。
これをそれぞれ規定の場所に追加していきます。

 

 

まずはじめにこれは、WPテーマの「header.php」の<head>〜</head>タグ内に書いてあげます。

次に、

 

これは、自分がこのフォントを使いたい範囲に指定してあげます。

私は<body>全体に使いたかったので、

 

 

としました。

また、ついでに、文字間、行間の指定をしてあげて、最終的に

 

 

こうしてあげました。

タイトルタグだけ少し変えたいよ〜とか思ったので、タイトルタグは

 

 

このように指定を入れています。

これだけでこんなかんじのブログになりました。

 

WPブログ フォント(新)
WPブログ フォント(新)

 

見比べてみるとやはり変わりますね!

こんな感じでGoogle Fonts + 日本語 早期アクセスのWebフォントはちょちょいのちょいで設定できちゃいます!

 

まとめ

 

かんたんにWebフォントでブログの雰囲気を変えられます。

今のブログがなんかださい…、イメージが違う…、古臭い…なんてお悩みのあなた!

ぜひWebフォントを活用してブログの雰囲気を変えてみてください。
かんたんにできる上に、フォントが他のサイトと違うと分かる人にはわかりますよ〜!

Google Fonts 日本語 早期アクセスをつかってみる

 

コメントを残す

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