Googleフォントを使えば好きなフォントを自由にインストールでき、さらにウェブフォントとしても利用することが可能です。いずれもウェブデザイナーには必須のスキルですので、ぜひ利用方法を知っておきましょう！

好きなフォントを選ぶ

GoogleフォントにアクセスするとGoogleフォントで利用できるフォントが表示されます。

CategoriesではSerifやSans Serifなどフォントのカテゴリ、Languageではフォントの言語を選ぶことができます。

Noto Sans JPをインストールする

では、試しに日本語フォントの「Noto Sans JP」をインストールしてみましょう。

Noto Sans JPは視認性の高い日本語のフォントで、名前の由来にはNoto – Wikipediaによるとこういう意味が込められています。

コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)、通称”豆腐”が表示されることが多いが、すべての言語に対応したフォントを開発することで”豆腐”が現れることがなくなるようにという意味を込めてNoto (no tofu)という名称が付けられた。

Noto Sans JPはサンセリフの日本語ですので、Categoriesを「Sans Serif」に、Languageを「Japanese」にしてセグメントすると見つかります。

クリックするのフォントの詳細が表示されます。右上にある「Download family」をクリックするとフォントの全ウェイトがZIPファイルでダウンロードされます。

ファイルのダウンロードが終わったらZIPファイルを右クリック → すべて展開をクリックしてZIPファイルを普通のフォルダに解凍してください。

「static」フォルダの中にあるフォントをすべて選択して、右クリック → インストールを選ぶとパソコンにフォントがインストールされて、PhotoshopやIllustratorで利用できるようになります。

Noto Sans JPをウェブフォントとして使う

Googleフォントにあるフォントはウェブサイトのウェブフォントとしても使うことができます。

目的のフォントをウェブフォントとして使うにはGoogleフォントでフォントを検索して詳細画面を開きます。ここまではインストールする手順と同じです。

次に詳細画面をスクロールしていくと「Select Regular 400」などフォントのウェイトが表示されていますので、ウェブフォントとして使いたいウェイトを選択します。

使わないウェイトをいくつも選択してしまうとウェブサイトの動作も重くなりますので、ここでは必要な分だけ選択するようにしてください。

必要なウェイトを選択し終わったら、右上の「View selected families」のアイコンをクリックします。

右側にドロワーが開きますので、「Use on the web」の項目にある使用方法のラジオボタンを選択してください。フォントのCSSファイルをHTMLファイルで呼び出す場合は<link>を選択、CSSファイルを他のCSSファイルから呼び出す場合は@importを選択します。

どちらを選んでも動作などに影響はないので好みになりますが、管理の観点ではCSSファイルで呼び出す@importを使った方法がおすすめです。

最後に表示されているコードをHTMLかCSSファイルに追記して、「CSS rules to specify families」の項目にあるCSSをコピーして、フォントを適用したい要素に追記してください。

以上です。

さいごに

Googleフォントは他のサイトに比べると利用できるフォントはそこまで多くありませんが、汎用性の高いものから印象的なものまで揃っていて、何より無料で簡単に使えるのがメリットです。ぜひ、覚えておきましょう！