ドリリウム

趣味の情報や思いついたことを発信しています。高知 / 釣り / DIY / バイク / 車 / 家具制作 / アクアリウム / コーヒー / 地方移住 / ルノー・ルーテシア / SUZUKI ST250 E typeなど。

はてなブログにGoogleのWebフォントを導入してみました

f:id:katamichinijikan:20180721182702p:plain

このブログに、GoogleのWebフォントを導入しましたので方法を紹介します。

Webフォントとは

通常、Webサイトで表示されるフォントは、Webサイトを閲覧するユーザーのPCやスマホにインストールされているフォントに限られます。最近では「メイリオ」や「游」などのなかなか綺麗なフォントがWindowsにも導入されましたが、お使いのパソコンからこれらのフォントを削除すれば、今見ているすべてのWebサイトはおそらく「MS ゴシック」あたりで表示されるはずです。

つまり、Webサイト上の「文字」のフォントは閲覧者の閲覧環境に依存します。

これを回避する方法として、文字の代わりに画像を使う方法がありますが、それ以外にも、サーバー側のフォントを使用するWebフォントという選択肢があります。

Webフォント - Wikipedia

Googleフォントとは

Googleフォントとは、Googleが提供するWebフォントです。

どのようなWebサイトにも手軽に導入することができます。

現時点で日本語フォントは9種類あります。

このブログでは、タイトルにニコモジをしようしています。

googlefonts.github.io

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

なお、日本語対応していないフォントは800種類以上提供されています。

fonts.google.com

Googleフォントの使い方

1.使いたいフォントを選ぶ

Googleフォントにアクセスして、使いたいフォントを選びましょう。

googlefonts.github.io

2.Webフォントを導入する

Googleフォントから使用したいフォントをクリックすると、フォントの紹介画面へ移動します。大変親切なことに、ここにフォントの参照のためのコードがあります。

f:id:katamichinijikan:20180329104840p:plain

赤く矢印をつけた <link href から始まる1行です。

これをコピーして、自分のブログのデザイン設定からヘッダ > タイトル下にコピーしたコードを貼り付けます。

f:id:katamichinijikan:20180329105031p:plain

これで導入は完了です。

3.Webフォントを使用する。

最もシンプルな使用方法は、フォントを直接指定する方法です。

例えばこの記事のなかで、試しにニコモジを使用しています。HTML編集からフォントを指定したい文字を囲うpタグにstyle="font-family: 'Nico Moji';"を直接追記しています。

f:id:katamichinijikan:20180329105436p:plain

あるいは、特定のIDやクラスにフォントを指定する方法ももちろん可能です。

このブログではタイトルにニコモジを使用していますから、デザイン設定デザインcssにて、#titleに対してニコモジを適用しています。

f:id:katamichinijikan:20180329105738p:plain

Webフォント利用時の注意点

メジャーなブラウザはWebフォントに対応していますが、対応していないブラウザでは表示されないケースが考えられます。対応ブラウザは以下の通りです。

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

また、ブラウザの設定やスタイルシートで閲覧者がフォントを明示的に指定している場合にはWebフォントの指定が無効になります。