Google fontsの使い方【初心者向け】
Google fontsの使い方【初心者向け】
カテゴリー：ウェブデザイン
デバイスに用意されたフォントでウェブデザインした場合、違うデバイスでみたときにイメージと違うフォントに互換されてしまった、そんなご経験はありませんか？
今回ご紹介するGoogle Fontsをご利用頂くと、デバイス間でのフォントの互換の問題を解決できます。 この記事ではGoogle Fontsのメリット・デメリットだけでなく、導入方法もご案内します。
Google Fontsを利用することで今後ウェブデザイン上、フォントの選択肢を多く持つことができ、デザインの幅が広がるようにもなります。
Contents
Google Fontsとは
Googleが提供する無料のウェブフォントです。日本語も含め様々な言語に対応しており、世界中で利用されています。
従って今回は既存のビジネスモデルを多く知ることこそが、新しいビジネスモデルの創出につながるという仮説に立ち、儲けの仕組み（ビジネスモデル）の基本パターンを７つご紹介します。
ウェブフォントのメリット・デメリット
通常のフォントの場合、そのホームページを見るデバイスにインストールされているフォントしか表示させることができませんでした。
従ってWindowsとMacのようにインストールされているフォントが異なれば、製作者の意図した通りのフォントが表示されないという状況がありました。
ウェブフォントのメリット
そこで上記の問題を解決できるのがウェブフォントです。 ウェブフォントはサーバーよりフォントを読み込むためデバイスに依存しないでフォントを表示させることができます。
つまりどのデバイスで閲覧しても同じフォントデザインで表示できる点にメリットがあります。
ウェブフォントのデメリット
日本語フォントの場合、英語フォントと比較して文字量が多いため、複数使用したり、太さ（ウェイト）を全種類選択したりすると、読み込み速度が遅くなるため注意が必要です。
Google Fontsの使い方
Google Fontsにアクセス
まずは Google Fonts のページにアクセスします。
使用したいフォントを探す
1.Search fonts
選びたいフォント名がわかっている場合には、ここで検索可能です。
2.Sentence
最初はあらかじめ入力された文字列が表示されますが、ここでサンプルを確認できます。
| Custom | 確認したい好きな文字が入力可能 |
| Sentence | あらかじめ入力されている文字列 |
| Alphabet | 言語に応じアルファベットで表示 |
| Paragraph | 段落のような長めの文字列 |
| Numerals | 数字 |
3.Categories
フォントの種類を選ぶことができます。
| Serif | 明朝体 |
| Sans Serif | ゴシック体 |
| Display | 装飾文字 |
| Handwriting | 手書き風文字 |
| Monospace | 等幅文字 |
4.Languages
日本語を始め様々な言語を選択できます。
5.Font properties
フォントの詳細をスライダーを調整することで絞り込めます。
| Number of styles | スタイルの数 |
| Thickness | 文字の太さ |
| Slant | 斜体 |
| Width | 文字幅 |
6.Show only variable fonts
チェックを入れると文字の太さや幅などを調整できるフォントのみ表示されます。
その他、スライダーによりフォントサイズを調整したり、sort byにより表示順を変えたりすることも可能です。
使用したいフォントを選択
使用したいフォントを選択すると個別ページに遷移します。スタイルが一覧表示されるので使用したいスタイルを「Select this style」をクリックして選択します。複数選択することも可能です。
読み込みと設置方法
1.右側に表示されるSelected familyの中にあるコードをコピーします。
2.コピーしたコードを<head>内にペーストすると読み込み準備が完了します。
<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@300&display=swap" rel="stylesheet">
CSSから読み込む場合
HTMLへの記述なしにCSSから読み込ませることも可能です。その場合は@importに表示されるコードをコピーしてCSSにペーストします。
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');
3.適用したい部分にSelected family 下部にあるcssをコピぺすれば表示されるようになります。
p {
font-family: 'Noto Sans JP', sans-serif;
}
まとめ
デバイスフォントの場合WindowsとMacのようにインストールされているフォントが異なれば、製作者の意図した通りのフォントが表示されないという状況がありました。
サーバーからフォントを読み込むGoogle Fontsでは、非常に簡単にデバイスフォントの欠点を補ってくれます。
文字数が多い日本語の場合、むやみに利用すると読み込み速度が低下するデメリットもありますが、ウェブデザインに上手に活用頂ければと思います。
Googleマテリアルアイコンの使い方はこちらを参考に
Adobe Fontsの使い方はこちらを参考に
お気軽にお問い合わせ下さい
ワンストップで様々なツールの作成が可能です