はじめに
HTML＆CSS入門講座の第二十六弾として、Google Fonts 使い方を 初心者向けに解説、Cocoonやパソコンでの利用などについても紹介します。
この記事を読むと次の疑問について知ることができます。
- Google Fontsとは？
- Google Fonts の初心者向け使い方はどうするの？
- Google Fontsページへのアクセス
- 必要なフォントの検索
- Google Fontsを利用するには？
- CocoonでGoogle フォントを利用するには？
- Google Fontsをダウンロードして自分のパソコンで利用するにはどうするの？
Google Fontsとは？
Googleが提供する誰でも無料で利用できるWebフォントです。
普通皆さんがブラウザーで見ているフォントは、あなたのパソコンが持っているフォントを使ってブラウザー上に表示されますので、機種、OSなどで同様なフォントが利用できるかと言うとそのようにはなりません。
しかし、Webフォントであれば、Googleのサーバーから自分の好みのフォントをダウンロードして利用できますので、機種、OSなどに依存せずに同じフォントで表示させることが可能となります。
Google Fontsは、Googleが2010年にサービスを開始し、現在では1000以上のフォントが利用でき、世界の多くのユーザーが利用しております。
日本語のフォントは、2018年9月に正式にサポートされ、現在、Google フォントのホームを見ると、24種類のフォントを見つけることができます。
Google Fontsは、先に述べたように良いことばかりではありません。
外国語のフォントであれば、日本語の文字数（漢字、ひらがな、カタカナなど）に比較して文字数（アルファベット、記号など）は圧倒的に少ないため、ダウンロードして読み込むのに時間がかかりませんが、日本語のフォントになると、容量が多くなるため読み込むのに時間がかかるというデメリットがあります。
このことは、十分に頭に入れ、必要のないフォントを読み込まないようにすることを心がけましょう。
Google Fonts の初心者向け使い方
Google Fontsページへのアクセス
使い方の第一歩は、Googleのフォントのページにアクセスすることです。
Google FontsはGoogleへのユーザー登録などを必要とせずに無料で利用できます。
必要なフォントの検索
Googleのフォントページの検索する部分のみを抜き出したものを次の画像に示します。
上述の画像でのフォントの検索の仕方を解説します。
⑤で「Japanese」を選択すると、⑤の左下に「24 of 1075 families」と表示されているのが分かる通りに、この時点で日本語が扱えるフォントはGoogle フォント1075種類の内 24種類 であることが分かります。
Google Fontsを利用するには？
先ず、自分の好みのフォントを上述から選択します。
ここでは、「Noto Sans JP」を選択して見ます。
「Noto Sans JP」のStyleを選択（Thin 100、Light 300、Regular 400、Medium 500、Bold 700、Black 900から選択可能）できる画面となりますので、「Regular 400」を選択して見ます。
すると、右の方に選択したフォントが表示され、その下にWebで利用するための「Linkコード」や「＠import」コードが表示されます。
これらをコピーして、利用するサイトのheadタグ内（<head>〜＜/head>）に「Linkコード」書き込めばOKです。
CSSから読み込ませたい場合は、「＠importコード」をCSS記述内に貼り込んでください。
そして最後に忘れてはいけないことは、HTML内でフォントfamilyをここで選んだGoogleフォントのフォント名を指定する必要があります。
CocoonでGoogle フォントを利用するには？
私は、自分のサイトのWordPressのテーマにCocoonを利用していますが、Cocoonでは、簡単にGoogle フォントを利用することができます。
利用できるフォントの種類は、次の8種類です。
ただ、英語のフォントでGoogle Fontsを利用したいとなれば、あなた好みのフォントをGoogle Fontsの約1000種類の中から選んで、インストールしておく必要があります。
その方法については、ここでは省略しますが、詳しく書かれた記事などもあると思いますので調べて見て下さいね。
WordPressの左メニューの「Cocoon設定」⇒「全体」タブをクリックします。
下にスクロールしてサイトフォントの部分の「ヒラギノ角ゴ、メイリオ（デフォルト） ∨」をクリックすると、フォント一覧が表示されます。
その中に「フォント名（Webフォント）」と表示されているものが、Google Fontsです。
この中からあなたの好きなGoogle Fontsを選択して、このページの上の方にある「変更をまとめて保存」をクリックすると、サイトフォントの右あるフォントプレビューであなたの選んだGoogle Fontsを見ることができます。
Google Fontsをダウンロードして自分のパソコンで利用
Google Fontsページからあなたがパソコンで使いたいフォントを選択して、フォントページを開きます。
ここでは、先に選択した「Note Sans JP」を選択し、「Note Sans JP」のページを開き、右上の「Dowonload Family」をクリックすると、「Note Sans JP」の圧縮ファイル Noto_Sans_JP.zip フィルがあなたのパソコンのダウンロードホルダーにダウンロードされます。
このファイルを、作業用ディレクトリーに移し解凍すると、次のファイルが出現します。
あなたがインストールしたいフォントを選択して、マウスの右クリックすると、表示されるメニューから「インストール」をクリックすることにより、選択したGoogle Fontsがあなたのパソコンにインストールされているはずです。
インストるされているかどうかを確認するには、「Winスタート」⇒「設定」⇒「個人設定」⇒「フォント」で「使用可能なフォント」の記入欄に「Note Sans JP」と記入して、検索して「Note Sans JP」が表示されればあなたのパソコンにインストールされていることが確認できます。
おわりに
如何だったでしょうか？
Google Fontsとは？、Google Fonts の初心者向け使い方はどうするの？、Google Fontsページへのアクセス、必要なフォントの検索、Google Fontsを利用するには？、CocoonでGoogle フォントを利用するには？、Google Fontsをダウンロードして自分のパソコンで利用するにはどうするの？などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント