WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >html

GoogleFontsに日本語フォントが追加され、高速化したフォントの表示が可能になりました。
そこで改めてGoogleFontsの使い方と日本語フォントの選択方法について解説していきます！

まずはGoogleFontsへアクセス！

https://fonts.google.com/
GoogleFontsトップページへのリンクは上記から。シンプルで見やすいですね。

【Search fonts】と書かれている検索ボックスから、指定したいフォントを探していきましょう。
トップに出てきているフォントはよく使われているフォントが出ていたりするので、そこからフォントを探してみても良いですね！

今回は日本語フォントの選択方法の解説なので、日本語フォントを選んでいきます。

検索ボックスのすぐ下にある、【Language】と書かれたプルダウンメニューをクリックしましょう。
そうするといくつか言語が選択できるようになるので、日本語の【Japanese】を選びます。
選択後の画面は、日本語フォントに絞り込みされた画面に切り替わります。

日本語フォントの選択とhtmlへの記述方法

使いたいフォント名の右上にある「＋」をクリックします。
クリック後、選択されたフォントが画面右下に追加表示されます。

【EMBED】と【CUSTOMIZE】というリンクが表示されますが、まずは【CUSTOMIZE】へ移動します。

【Languages】以下の【Latin（Supported by all Fonts）】がデフォルトで選択されていますが、このままではラテン語（英数字や記号など）しか使えないので、日本語フォントを使用するために【Japanese（Supported by Noto Sans JP）】のチェックボックスをクリック！

再度、【EMBED】へ戻ると日本語フォントを使用するために必要な情報に更新されています。これをHTMLのhead内へ追加しましょう。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap&subset=japanese" rel="stylesheet">

続いて、CSSも設定していきます。
フォントを反映させたいCSSファイル内に追記します。

body{
　font-family: 'Noto Sans JP', sans-serif;
}

これでGoogleFontsの設定は完了です！日本語フォントじゃない場合は、【Languages】内の【Japanese(Supported by 対象フォント) 】のチェックを選択するのを省けば同様にGoogleFontsが利用できます。

まとめ

GoogleFontsを使えば様々なフォントを豊富に使うことができますのでぜひご活用ください！