つなろっく

イロトリドリな毎日

はてなブログにGoogle Fontsで日本語フォントを使ってみよう

f:id:pea-nut:20190125173056p:plain

おすっ!つな(@tu_na_69)です(*‘∀‘)

はてなブログにGoogleのWebフォントを使ってみよう

 重いサイトを最適化させる大作戦!!を実行中の「つなろっく」です。

ヘッダーのオリジナル画像を削除してフォントのみでサイトタイトルを表示させたのですが、シンプルすぎて寂しい。画像を使わずに、フォントでインパクトのあるタイトルにできないかと考えて、見つけたのがGoogle Fontsの日本語フォントを利用するアイデアです。

ヘッダーとフッターでタイトルにGoogle Webフォントを設定しています。

なかなかかわいくできました。

 GoogleWebフォントとは?

Googleが提供しているWebフォントです。

以下のブラウザに対応しています。

  • IE
  • Firefox
  • Chrome
  • Android標準ブラウザ
  • Opera
  • Safari

メインに使われているほとんどのブラウザに対応しています。

日本語フォントの種類

800種類以上あります。そのうち日本語フォントは9種類あります。

f:id:pea-nut:20190120213727p:plain

Google Web日本語フォントの種類

  • M PLUS 1p
  • M PLUS Rounded 1c
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニコモジ
  • ニクキュウ
  • Noto Sans JP

それぞれ個性のあるフォントです。じっくり選んでみてくださいね。

フォントのコードを貼り付ける

Google Fontのページをひらきます。

 Google Fonts + Japanese • Google Fonts + 日本語

 使いたい日本語フォントを選んでください。

f:id:pea-nut:20190120220733p:plain

①使いたい日本語フォントのページに記載されているHTMLコードをコピーします。②HTMLコードを貼り付けます。

「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」

③CSSコードを貼り付けます。

「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」

Google Fotnsの使い方

いくつか使い方があります。

ブログ全体のフォントに設定する

f:id:pea-nut:20190125173848p:plain

Google Fontsのフォントをサイトフォントに設定することができます。

画像は、「ニクキュウ」をサイトフォントに設定した場合。

「ニクキュウ」はカタカナフォントなので、こんな感じになります。読みづらい(;''∀'')

サイトのフォントに設定するには、以下のコードをカスタムCSSに追加します。

body{font-family: "Nikukyu"; }

ほかのフォントを使用したいときは、"Nikukyu"の部分を変えてくださいね。

HTML編集でフォント設定する

こんな感じで、記事内の特定の文字だけにフォントを設定することができます。

つなろっく

HTML編集で以下のようなコードで、class設定をします。

<p class="wf-nikukyu">つなろっく</p>

cssコードに設定してあるclass名を入れてください。

編集画面には反映されないので、プレビューで確認してくださいね。

 タイトルフォントを設定する

 サイトのタイトルにGoogle Fontsを設定したいときは、デザインCSSに以下のようなコードを貼り付けます。

#title{font-family: "Nikukyu"; }

当サイトでは、ニコモジを使用しています。

まとめ

フォントを変えてみると、遊び心のあるサイトになりますね。

おもしろいので、みなさんもやってみてください。