今回は、自分のWebサイトで使うことができるGoogle Fontsの使い方についてまとめていこうと思います。
私は本業でWebサイトを作った時、なかなか納得のいくフォントに出会えずに最終的にこの「Google Fonts」に出会ってから今では結構重宝してます！
nakatty
カタカナだけ指定したりもできますよ
おお！なんかみたことないフォントになってます！
のぶこ
Google Fontsってなんなのさ
Google Fontsってなんなんですか？？
のぶこ
nakatty
Google Fontsとは無料で使えるWebフォントのことです。簡単にできますよ！
Webフォントってなんなのさ
Webフォントとは、あらかじめサーバ上に置かれたフォントデータを自分のサイトに表示させることができるフォントです。
Webフォントのメリット
Webフォントの良いところは、閲覧者の端末に影響されることなくWebサイトの制作者の思った通りのフォントを表示させることができるところです。
通常のフォントを使った場合、閲覧者の端末に指定したフォントが無い場合、別のフォントが代用されます。
↓の画像みたいな感じです。
それがWebフォントを使うと、サーバー上からフォントデータを読み込むので、閲覧者の端末にフォントデータが無くても問題なく指定したフォントを表示させることができます。
↓の画像みたいな感じです。
Webフォントのデメリット
Webフォントの悪いところは、サーバーからフォントデータを読み込むので、ページの表示に多少なりとも時間がかかるところです。
とはいえ、そこまで劇的に遅くなるということは無いです。(個人的な体感ではそんなに変わってる気はしません)
ただ、何種類もwebフォントを指定していったら、気がつくくらいには表示速度が落ちるかもしれません、、、。
Google Fontsの使い方
Google Fontsの使い方です。まずはGoogle Fontsにアクセスして使いたいフォントを選びます。
コードを取得する
Google Fontsにアクセスすると↓みたいな画面になります。
今回は「Noto Sans JP」を選んでみます。
↓の画像の赤枠の所にあるボタンを押します。
すると↓の画像のように赤枠の場所に黒いのが出てきますのでクリックしてください。
黒い部分をクリックすると↓の様な画面が出てきますので、赤枠の部分をコピーします。
WordPressで読み込める様にする
先ほどコピーしたコードをWordPressで読み込み表示できる様にします。
ダッシュボードから外観→テーマエディターに進みます。
使っているテーマ内にある「header.php」を探します。
「header.php」内にある「<head>〜</head>」の中に貼り付けます。
これで、サイト内で「Noto Sans JP」が使える様になります。
Google Fontsを使ってみる
このブログ内で「Noto Sans JP」が使える様になっているはずですので試してみます。
フォントを当てたい部分に「font-family: ‘Noto Sans JP’, sans-serif;」を当てるだけでフォントが変わります。
普通の文字↓
なかってぃ ナカッティ nakatty NAKATTY
Google Fonts(Noto Sans JP)↓
なかってぃ ナカッティ nakatty NAKATTY
あんまり、違いわかりませんが、ちゃんと変わってますね。
Google Fontsは種類もたくさんあるので色々みてみると良いと思います٩( •̀д•́ )و