デザインの印象によく関わる要素の一つにフォントがあると思います。
SNSの投稿や、商品サービス、さまざまな場面で印象付けにフォントが活用されているのを見かけます。
Webサイトでも、文章の可読性・視認性やサービスイメージなど重要な要素として使われています。
Webサイトのデザインをより良くするためにもぜひ使いたい！とはいえ、使い方がよくわからない・有償フォントを導入するのは難しい…と迷っている方はいませんか？
そんな時、商用利用可能で無料で導入できるのがGoogle Fontsです。
今回は、Google Fontsの導入方法をご紹介いたします。合わせてWebサイトに使われるフォントの基本も簡単に解説いたしますので、ぜひ参考にしてみてください。
目次
Webサイトに使われるWebフォントとデバイスフォント
Google Fontsを導入する前に理解しておくと良いのがWebサイトに使われる2種類のフォントの違いです。
Webサイトは通常CSSでフォントを指定します。
そしてWebサイト表示時はCSSを読み込み、利用端末ごとにインストールされているフォントから条件があうものを選定し表示させています。
この利用端末がインストールしているフォントのことをデバイスフォントを呼びます。
デバイスフォントはスマートフォンやPC、各種OSによってインストールされているものが異なり、個々の閲覧環境によってフォントが異なってしまう可能性があります。
対して、統一させることが可能なフォントがWebフォントです。
Webフォントはサーバー（インターネット）上にデータが置かれたフォントで、利用時はサーバー上のデータを読み込んで表示させています。
Webフォントを指定すれば、利用端末によらずサーバーを介してフォントを読み込むため、必ず同じフォントを表示させることができます。
では、早速Google Fontsの導入方法をご紹介いたします。
Google Fontsの導入方法
Google Fontsにアクセス後、使いたいフォントを探す
上記リンクからGoogle Fontsトップページへ移動します。
Google Fontsは世界中のフォントから選ぶことができますが、基本的に日本語サイトに利用する場合は、検索条件に「Japanese」を条件に入れて検索しましょう。
使いたいフォントを選び、フォント詳細に移動
使いたいフォントを選んだら、クリックしてフォント詳細を開きます。
その後フォント詳細画面右上にある「Get font」を選択します。
複数ある場合は、再度フォント一覧に戻り、別の使いたいフォントを選択し「Get font」を選択します。
続いてフォント選択が終了したら、右側に表示されている「Get embed code」を選択します。
フォントのコードをコピーし、html・CSSにコードをコピーする
フォントのコード取得画面に移動後、左側のWeightで使う太さを指定します。
（フォントによって表示が若干異なります。）
右側で「Web」タブを選択し、「Embed code in the <head> of your html」に該当する部分を「Copy code」でコピーします。
自身のサイトhtmlに移動し、<head>内の任意の場所にペーストします。
補足：<link>と@importどちらを選ぶべき？
Webタブ内には<link>と@importの選択肢があります。
基本的にどちらも<head>内の任意の場所に記述して利用できますが、@importはCSSに記述して利用することもできます。
一般的なブラウザでは同じような動作ですが、基本的に<head>内に記述して対応できる場合は<link>を、CSSファイル内に記述する必要がある場合は@importを選ぶようにします。
※以下はNoto+Sans+JPをCSSファイルに記述した例
- @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap')
フォントの記述部分を調整する
フォントウェイト（太さ）や斜体の使用範囲を変更したい場合は記述を整理します。
例えば、Noto+Sans+JPをnormalウェイト（400）とboldウェイト（700）だけを利用する場合は以下のように記述します。
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
他にも以下のように使用範囲を調整可能です。（Noto+Sans+JPを利用した場合）
公式ガイドラインには斜体の適用方法等もありますので、気になる方は合わせてリンクを参照ください。
https://developers.google.com/fonts/docs/css2?hl=ja#axis_ranges
| フォント | フォントのURL |
| wght 100 – 900 | https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap |
| wght 400 と 700 | https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap |
| wght 700 だけ | https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap |
CSSでフォントを適用させる
最後に、フォントを適用したい部分をCSSで調整します。
「フォント名: CSS class for a variable style」はフォントを適用させるためのCSS記述例です。
記述例を参考に適用したい部分のCSSを調整してください。
（以下はtitleというクラスを持つ要素にNoto Sans JPを適用する例）
- .title {
- font-family: "Noto Sans JP", sans-serif;
- font-optical-sizing: auto;
- font-weight: 600;
- font-style: normal;
- }
Google Fontsの便利機能
1000種類を超えるGoogle Fontsを選ぶとき、探すのに便利な機能もありますので紹介いたします。
Google Fontsの検索結果表示順
Google Fontsの検索機能には表示順を指定する機能があります。
いつもと違うフォントを探す時、トレンドに即したフォントを探す時に便利です。
現在は「Trending（トレンド）・Most popular（利用者）・Newest（新着）・Name（フォントの名前）」の４種類で指定可能です。
フォントの見本検証機能
Google Fonts詳細を選択後、「Type tester」を選択すると、フォントを入力検証したり、Weightごとの確認ができます。
使いたい文字列が適用できるのか、文字に違和感がないかといった検証をするときに便利です。
おわりに
今回はGoogle Fontsについて簡単な導入方法を解説しました。
Google Fontsは無料で商用利用が可能です。
デザイン性に優れたフォントが揃っているのはもちろん、他の配布サイトに比べると、比較的ライセンスの心配を少なくでき、運用コストを抑えることも可能です。
Google FontsをはじめとするWebフォントはデバイスフォントによらず、統一したデザインや効果的なアクセントを実現できます。
ちょっとの手間でサイトの印象を変えることができますので、ぜひお試しください。
