か

Google Fontsの使い方

Google Fonts の使い方等をまとめてみました。

Google Fontsとは、Googleが提供するWebフォントサービスです。

基本的に無料で利用でき、1406様々なフォントにも対応している点が大きな特徴です。

Google Fontsを使うための手順

Google Fontsを使用するために、ここでは利用方法を説明していきます。

大まかな手順は下記です。

1. Google Fontsにアクセス
2. Google Fontsの探し方
   • Custom
   • Categories
   • Language
   • Font properties
   • Sort by :
3. フォントのスタイルを決める
   • Customに「Love」を入れる
   • フォントを選ぶ
   • HTMLにフォントの読み込みコードを貼る
4. スタイルをリセットする
5. 二つ以上のフォントを利用する場合
6. まとめ
7. オススメフォント
   • 日本語（ゴシック体）
   • 日本語（明朝体）
   • 英語（ゴシック体）
   • 英語（明朝体）

Google Fontsにアクセス

まずGoogle Fontsにアクセスします。

利用できる1406フォントの一覧が表示されます。

Google Fontsの探し方

探し方はいくつもあります。

先ずは、custom欄に好きな言葉を入れてみましょう！！

するとフォントによって見え方が大きく変わることに気づくことができます。

これだけで、読み手に伝わる印象が大きく変わってきます。

1. Custom
2. Categories
3. Language
4. Font properties
5. Sort by :

Custom

アルファベット順や数字、任意のテキストなど選べます。

Categories

Categoriesでは Serif , Sans Serif , Display , Handwriting , Monospaceを選ぶことができます。

Language

２９言語の中から選ぶことができます。

基本的には英語と日本語でしょうね。

Font properties

フォントの詳細を絞り込む際に使います。

Sort by :

検索結果の並び順を変えることができます。

フォントのスタイルを決める

フォント一つで与える印象はかなり違います。

ですが、絞り込むのは至難の業です。

ある程度、絞り込んではクライアントに確認をするのがベストでしょう。

「LOVE」という文字をもとに絞り込んでいきます。

Customに「Love」を入れる

フォントを選ぶ

例として数ある中から「Roboto」を選びました。

クリックすると画面が変わります。

ここでお好みの太さを選びます。

標準は「Regular 400」で、太文字は「Bold 700」です。

お気に入りがいつかったら各スタイルの右にある「+ select this style」をクリック。

HTMLにフォントの読み込みコードを貼る

「+ select this style」をクリックすると画面右上に赤丸が出現したと思います。

これをクリックします。

すると右からスライドが出てきます。

上部には選んだフォント、スタイルが表示されていると思います。

HTMLにコードを貼るには中間にある「Use on the web」内にあるコードです。

<link>にチェックしたのち、コードをコピペして下さい。

<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=Roboto&display=swap" rel="stylesheet">

そして、CSSには下の枠内にあるコードをコピペして下さい。

font-family: 'Roboto', sans-serif;

これで完成です！！

スタイルをリセットする

右から出てきたスライド上部のスタイル横に「マイナスアイコン」をクリックするとリセットできます。

二つ以上のフォントを利用する場合

英語と日本語を使用しているサイトがほとんどだと思います。

なぜなら、Webは世界中の人が検索して見ることができるからです。

少なくとも英語と日本語が書かれている方がわかりやすいですね。

デザイン的には２種類ほどが望ましいと言われています。

あちこちで違うフォントスタイルを使われていると、かえって読みにくい現象がおきます。

では、先ほどの「Roboto」というスタイルに、日本語のスタイルとして人気の「Noto Sans JP」のレギュラーを加えてみたいと思います。

1. 　検索窓に「Noto Sans JP」と入れます。
2. 「Noto Sans Japanese」が現れるので、クリック。
3. 「Regular 400」の右側にある「Select this style」をクリック。

ここまでは同じですね。

右からスライドされた中には、すでに「Noto Sans Japanese」が加わっています。

<link>したのHTMLコードに黒の太字で「Noto+Sans+JP」と追加されていますのでOKです。

短縮したい場合は３行目を下記のように間に「|」を入れるだけです。

<link href="https://fonts.googleapis.com/css?family=Roboto|Noto+Sans+JP&display=swap" rel="stylesheet">

CSSの短縮は英語のフォントを先に書きます。

font-family: 'Roboto', 'Noto Sans JP', sans-serif;

「Roboto」のように１語の場合は前後に「”」を入れなくとも大丈夫です。

逆に「Noto Sans JP」のように複数の言葉からなるものには必須です。

まとめ

これで「Google Fonts」を扱えるようになりました。

依頼の中で適したものを１４０６種類の中から厳選するのは至難の業なので、いくつか好みのものをピックアップしておくのが望ましいでしょう。

また、人気のホントなどチェックしておくこと、他のWebサイトを見たときにフォントの種類を確認しておくなど方法はあります。

オススメフォント

日本語（ゴシック体）

• Noto Sans Japanese
• Zen Kaku Gothic New
• Kosugi

日本語（明朝体）

• Noto Serif Japanese
• Sawarabi Mincho
• Zen Antique

英語（ゴシック体）

• Roboto
• Montserrat
• Raleway

英語（明朝体）

• Playfair Display
• Merriweather
• PT Serif
• Noto Serif