新しくなったGoogle Fontsの使い方

DATE:

2020/04/13

CATEGORY:

Web制作

Google Fonts
Webフォントの特徴
Google Fonts のライセンス
Google Fontsの使い方
フォントの選択
Google Fontsのサーバーから読み込む
ダウンロードしてローカルに置く
太字がぼやける場合
Google Fonts のよくある疑問
Webフォントはページの読み込みを遅くする？
Google Fonts API って何？
Google Fontsが使えるブラウザは？

フォントを変更するには複数のフォントを指定してCSSに font-family を記述して確認する… と結構な手間がかかります。実際に導入してみると予想と違っていたなんてことも。

Google Fontsでは大半をGoogleが行ってくれるので非常に簡単にWebフォントを試すことができます。

手軽にWebフォントを試してみたい
Windowsのフォントは読みにくいので変更したい
フォントでサイト独自のイメージを出したい

この記事では上記のような目的の人を対象に Google Fontsを使った簡単なWebフォントの導入方法について紹介していきます。

Google Fonts

Google Fonts とはフリーライセンスのフォントを集めたライブラリで、Webフォントの検索からHTMLとCSSコードの発行まで行ってくれます。

Google Fontsは 2020/3/3 で立ち上げから10年目を迎えサイトが新しくなりました。

Google Fonts

Webフォントの特徴

フォントはユーザーの環境により表示が異なりますが、Webフォントを使用するとユーザーのデバイスにインストールされていないフォントでも表示させることができます。

どのユーザーにも同じ表示を提供できるため個別に調整する必要がなく自分の思ったデザインに統一できる利点があります。

またユニークなフォントでサイト個性を出すことも可能になります。

Google Fonts のライセンス

Google Fonts のライセンスはフォントごとに設定されていますがほとんどは SIL Open Font License 1.1 でリリースされており、一部は Apache License でリリースされています。

参照：Wikipedia Google Fonts

Google Fontsの使い方

Google Fonts

フォントの選択

Languegeから言語を選択します。また右側の Categoriesで書体を選択できます。

日本語のフォントは2020/4/12現在 8種類あります。表示されたフォントの中から使用したいものを選びます。

Noto Sans JP
Noto Serif JP
M PLUS 1P
Sawarabi Mincho
M PLUS Rounded 1c
Sawarabi Gothic
Kosugi Maru
Kosugi

Noto Sans JP の場合 Thin 100 から Black 900までの6種類のスタイルがあります。

右側の Selected family メニューの開閉
スタイルを追加
スタイルの削除
Webフォント読み込みのためのリンク
CSSに記述する font-family

+Selected this styleをクリックすると④にコードが追加されます。

フォントを使用する方法はGoogle Fontsのサーバーから読み込む方法とダウンロードしてローカル環境から読み込む方法の2種類があります。

Google Fontsのサーバーから読み込む

④に表示されているコードをhtmlのhead内に追加します。これでフォントが読み込まれるので後は⑤を参考にCSSの font-family に追加するだけです。

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

ダウンロードしてローカルに置く

フォントをダウンロードしてローカルに置き @font-face を使って読み込む方法です。

フォントはDownload familyからダウンロードできます。ZIPの中には選択したスタイルに関係なく全てが入っています。

Noto Sans JPの場合、1フォントあたり約4～4.6MBです

@font-faceを使ってフォントを読み込み font-family で指定すればOKです。

太字がぼやける場合

font-weight: normal で @font-face指定したフォントに bold を適用するとぼやける場合があります。@font-faceで指定する場合は font-weight ごとに分けて記述します。

@font-face {
    font-family: 'Noto Sans JP';
    src: url('fonts/NotoSansJP-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans JP';
    src: url('fonts/NotoSansJP-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

format() はブラウザにフォントのリソースがどの形式であるかの情報を伝えます。利用可能な形式は、”woff”, “woff2”, “truetype”, “opentype”, “embedded-opentype”, “svg” です。

参照：@font-face