【Webフォントの代表格】Googleフォントの使い方

今日は、代表的なWebフォントである、Googleフォントの使い方を解説していくよ！まずはWebフォントについて簡単に説明するね。

Webフォントとは

Webフォントが登場する前は、Webサイトを閲覧する人のPCにインストールされているフォントを用いて文字を表示させる方法が主流でした。この場合、特殊なフォントを使用する場合は画像にするなどの処置が必要でした。

この方法では、指定したフォントが閲覧者のPCにインストールされていないと、別のフォントが代用されるため、製作者が意図しない表示になるという問題がありました。

この問題を解決するのが、Webフォントです。Webフォントは、インターネット上にあるフォントを呼び出すことで、閲覧者のPCにインストールされていなくても、製作者の指定通りにフォントを表示することができます。

代表的なWebフォントには、GoogleフォントやAdobeフォントがあります。以下にGoogleフォントのダウンロード方法と、コーディングする際の指定方法を説明していきます。

Googleフォントを使用してデザインを作成する際は、フォントをダウンロードする必要があります。また、Webサイトに反映させるには、ダウンロードをする必要はありませんがHTMLファイルにフォントを読み込む必要があります。

まずは、ダウンロードのやり方から学んでいきましょう。

Googleフォントのダウンロード手順は、こんな感じです。

①Googleフォントのサイトに行く

②Googleフォントを検索する

③カスタマイズしてダウンロードする

まずは、https://fonts.google.com/ にアクセスしましょう。これがGoogleフォントのサイトです。

次にGoogleフォントを検索します。今回はNoto sans JP と、Roboto を検索しましょう。

まず、検索窓に「Noto sans JP」と入力して、フォントが表示されたら右上のプラスマークをクリックします。そうすると、画面右下に「1 Family Selected」と書いてある黒いボックスが表示されます。

続けて、「Robot」を検索して見ます。また、右上のプラスマークをクリックすると、右下の黒いボックスに「2 Families Selected」と表示されます。

フォントを選択したら、画面右下に表示されている「2 Families Selected」と書いてある黒いボックスをクリックしてみましょう。そうすると、フォントをカスタマイズしたり、ダウンロードしたりする画面が表示されます。

カスタマイズのタブを開くと、今回選択した「Noto sans JP」と「Roboto」のフォントの太さを選択できます。今回はRegularとBoldにチェックを入れます。そして、右上にあるダウンロードマークをクリックします。これでダウンロードは完了です。

Macの場合はダウンロードしたフォントファイルを開き、インストールします。Windowsの場合はフォントファイルを右クリックしてインストールを選択しましょう。

以上の手順で、「Noto sans JP」と「Roboto」が使用できるようになりました！

HTMLへの読み込み方法もフォントを検索して、カスタマイズするところまでは同じ手順です。EMBEDタブメニュー内のlinkタグをHTMLファイルのheadタグ内に貼り付ければ準備OKです。CSS側で、font-familyを指定すればWebサイトに反映できます。

おつかれさまでした！これでGoogleフォントの使い方はバッチリだね。
和文フォントは少ないけど、欧文フォントは種類豊富なのでいろいろ試してみてね★

　この記事がいいと思ってくださった方は、SNSでのシェアをお願いします！[addthis tool="addthis_inline_share_toolbox_mqi1"]

無料でwebデザインに関する質問にお答えします。

クリ★スタは未経験からwebデザイナーを目指す方を応援しています！そのため、学習していく中での些細な疑問に記事で回答していきます。

お気軽にご連絡ください。→クリ★スタ(@cresta_design)

　動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。

　ぜひチャンネル登録お願いします🙇‍♂️→クリ★スタYoutubeチャンネル