文字のフォントを変えるGoogle Fontsの導入と使い方

文字の形や雰囲気はとても重要です。

ホームページを作る時にデザインの一つとして文字のフォントがあります。

そのフォントとはなんなのか、どうやって変更するのか。

今回はフォントについて紹介したいと思います。

フォントってなに？

文字の見た目のこと

WEB FONTS

文字のフォントとは、文字の見た目のことを言います。

ホームページの印象を変えたい時の1つの方法として、文字のフォントを変えることが出来ます。
- フォントを変えるには？
  
  フォントを変更するには、CSSで変更することが出来ます。
  
  ただし、変更するにはフォントデータというファイルが必要になります。
  
  実はそのフォントデータはすでにあなたのパソコンやスマホの中に入っています。
  
  CSSでそのフォントを指定することで変更が出来ます。

フォントを変える方法はいくつかあリます。

今回は簡単にフォントを変える方法と、より便利なGoogle Fontsについて紹介します。

Index

文字のフォントを変える方法を紹介します。

CSSだけで簡単に変更が出来るので試してみて下さい。

まずはフォントについて少し解説します。

フォントについて

フォント

ABOUT FONTS

フォントは「明朝体」や「ゴシック体」といった、いろんなタイプがあります。

さらに「明朝体」や「ゴシック体」の中にもたくさんのスタイルがあるので、フォント全体の数は数え切れないほどあります。

Webでフォントを変えたい時は、フォントデータが必要になります。

フォントデータ

フォントを変える時は、「フォントデータ」が入ったファイルを読み込んで表示しています。

「フォントデータ」は英数字だけのものや、日本語だけのものがあります。
- フォントデータはどこにある？
  
  フォントデータはパソコンやスマホの中にすでに入っています。
  
  つまり、フォントデータを準備する必要がなく、CSSですぐにフォントの変更が出来ます。
  
  ただし、すべてのフォントがパソコンやスマホの中に入っているわけではありません。
  
  端末やOSによって元から入ってるフォントデータは違います。
  
  使えるフォントは端末ごとに違う
  
  使えるフォントは「端末」や「OS」によって違います。
  
  「windows」では使えるのに「android」では使えない、「android」では使えるのに「iphone」では使えないといったことがよくおきます。
  
  その理由は端末ごとに用意されているフォントデータが違うからです。
  
  そのため、フォントを変更する時は複数のフォントを指定する必要があります。

文字のフォントはCSSで簡単に変えられます。

ですが、端末やOSごとに使えるフォント・使えないフォントがあるので注意が必要です。

それでは、フォントを実際に変えてみましょう。

フォントを変える

<h1>ヒツジのおはなし</h1>

<p>Hello everyone !!</p>

<p>このサイトの主のヒツジです。</p>

body {

font-family: 'Courier','Meiryo UI','Wawati SC','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;

}

ヒツジのおはなし

Hello everyone !!

このサイトの主のヒツジです。

フォントの変更

font-family
font-family
1. Courier
2. Meiryo UI
3. Wawati SC
4. ヒラギノ明朝 ProN
5. sans-serif
文字のフォントを変える時は「font-family」というプロパティを使います。

「font-family」の値は変更したいフォントを指定します。

今回使用するフォントは第1候補から第5候補まで指定しました。

「Courier」「Meiryo UI」「Wawati SC」「ヒラギノ明朝 ProN」「sans-serif」の5つを使用します。

5つのフォント候補から、端末やOSごとに使えるフォントが自動で適用されます。
body {
font-family: 'Courier','Meiryo UI','Wawati SC','ヒラギノ明朝 ProN','Hiragino Mincho ProN',sans-serif;
}
- 第1候補
  
  Courier
  
  英数字
  
  第1候補の「Courier」は英数字のフォントです。
  
  「A〜Z」「0〜9」のフォントが変化します。
  
  対応しているOSは「Windows」「Mac」「Android」「ios」に対応しているので、ほぼすべての端末で適用されます。
- 第2候補
  
  Meiryo UI
  
  日本語
  
  第2候補の「Meiryo UI」は日本語のフォントです。
  
  「ひらがな」「カタカナ」「漢字」のフォントが変化します。
  
  対応しているOSは「Windows」のみで、その他のOSではフォントは適用されません。
- 第3候補
  
  Wawati SC
  
  日本語
  
  第3候補の「Wawati SC」は日本語のフォントです。
  
  「ひらがな」「カタカナ」「漢字」のフォントが変化します。
  
  対応しているOSは「Mac」のみで、その他のOSではフォントは適用されません。
- 第4候補
  
  ヒラギノ明朝 ProN(Hiragino Mincho ProN)
  
  日本語
  
  第4候補の「ヒラギノ明朝 ProN」は日本語のフォントです。
  
  「ひらがな」「カタカナ」「漢字」のフォントが変化します。
  
  フォント指定する時は、日本語(ヒラギノ明朝)と英語(Hiragino Mincho)の両方を指定します。
  
  対応しているOSは「Mac」「ios」のみで、その他のOSではフォントは適用されません。
- 第5候補
  
  sans-serif
  
  英数字&日本語
  
  all
  
  第4候補の「sans-serif」は英数字と日本語のフォントです。
  
  第1候補から第4候補のフォントがすべて対応していなかった時のために、最後の保険として指定します。
  
  すべてのOSや端末が必ずあるフォントなので、代替えフォントとして使われます。

フォントの優先順位

font-family

Courier
Meiryo UI
Wawati SC
ヒラギノ明朝 ProN
sans-serif

フォントは第1候補から第5候補まで順番に検査していき、OSや端末ごとに使えるフォントから適用されます。

もし使えるフォントが複数ある場合は、先に指定した候補が適用されます。

Windows

1 2

Windowsでは第1候補の「Courier」と第2候補の「Meiryo UI」が適用されます。

英語の部分は「Courier」、日本語の部分は「Meiryo UI」が適用されます。
font-family:Courier,Meiryo UI;
Mac

1 3

Macでは第1候補の「Courier」と第3候補の「Wawati SC」が適用されます。

英語の部分は「Courier」、日本語の部分は「Wawati SC」が適用されます。

第2候補のフォントはMacに対応していないので、適用されません。
font-family:Courier,Wawati SC;
Android

1 5

Androidでは第1候補の「Courier」と第5候補の「sans-serif」が適用されます。

英語の部分は「Courier」、日本語の部分は「sans-serif」が適用されます。

第2候補から第4候補までのフォントはAndroidに対応していないので、適用されません。
font-family:Courier,sans-self;
iOS

1 4

iOSでは第1候補の「Courier」と第4候補の「ヒラギノ明朝 ProN」が適用されます。

英語の部分は「Courier」、日本語の部分は「ヒラギノ明朝 ProN」が適用されます。

第2候補から第3候補までのフォントはiosに対応していないので、適用されません。
font-family:Courier,ヒラギノ明朝 ProN, Hiragino Mincho ProN;

指定する時の順番

CSSでフォントを変える

英数字日本語sans-serif

フォントを指定する時は、先に英数字フォントを指定してから日本語フォントを指定します。

今回の場合は、先に「Courier」を指定した後に「Meiryo UI」を指定します。

font-family:Courier,Meiryo UI, sans-self;

日本語フォントは後に書く

CSSでフォントを変える

日本語英数字sans-serif

日本語のフォントには英数字も含まれています。

もし「日本語フォント」の後に「英数字フォント」を指定した場合は、「英数字フォント」は適用されません。

理由は、日本語フォントの中にも英数字が含まれているために、英数字のフォントは必要なくなるからです。
font-family:Meiryo UI,Courier, sans-self;

フォントはOSや端末によって適用されるものが違います。

だからいくつものフォントを指定しないといけないんですね。

それって、面倒ですよね...。

それならGoogle Fontsを使いましょう！！

文字のフォントをGoogle Fontsを使って変えてみましょう。

Google FontsはOSや端末に関係なく、思い通りのフォントに変えることが出来ます。

Google Fontsとは

Google Fonts

Fonts

Google FontsはGoogleが提供している無料のフォントサービスです。

ページを開いた時にGoogleからフォントをダウンロードして、Googleのフォントを適用します。

Google Fontsのいいところ

Google Fontsは、使っているOSや端末によってフォントが変わってしまうということはありません。

外部からフォントをダウンロードしてフォントを表示しているので、すべてのOSや端末で同じフォントを使うことが出来ます。
Google Fontsの導入

CDN

ダウンロード

Google Fontsを使う時は、2つの方法があります。

Googleからフォントの提供をお願いする「CDN」という方法と、あらかじめダウンロードして使う方法の2つがあります。
- CDN
  
  ページにアクセスする度にGoogleにフォントを提供してもらう方法を「CDN」と言います。
  
  Google Fonts公式サイトから使いたいフォントを選択して、リンクからフォントを読み込んで使用します。
- ダウンロード
  
  あらかじめ使いたいフォントをGoogle Fonts公式サイトからダウンロードして使用します。
  
  ダウンロードしたフォントは、利用しているサーバーに載せてフォントを読み込んで使用します。

Google Fonts便利そうですよね！！

ヒツジのサイトも実は使っています。

まずは一番簡単な「CDN」の方法で導入してみましょう。

CDNで使う

<!DOCTTYPE html>

<head>

...

</head>

<body>

<h1>ヒツジのおはなし</h1>

<p>Hello everyone !!</p>

<p>このサイトの主のヒツジです。</p>

</body>

</html>

body {

font-family: 'Satisfy', 'Sawarabi Mincho', sans-serif;

}

ひつじのおはなし

Hello everyone !!

このサイトの主のヒツジです。

CDNでフォントを導入する

リンク:GoogleFonts公式サイト

CDNで導入する

Google Fonts公式サイトから使いたいフォントを選択して、リンクからフォントを提供してもらえるようにします。
1. 使いたいフォントを選択する
  
  Google Fonts公式サイトから使いたいフォントを探して選択します。
  
  フォントのスタイルと太さは、「Regular 400」を選択します。
  
  使いたいスタイルのフォントが決まったら、「 Select This Style」をクリックして完了です。
  
  この操作を、まず始めに「英数字」のフォントを選択した後に、「日本語」のフォントを選択します。
  
  太いフォントを使いたい時は「Regular 700」など数値が高いものを選ぶことも可能です。
2. リンクをそのままコピー
  
  「 Select This Style」を選択すると、画面の右側に選択したフォントが表示されます。
  
  「Review」は選択したフォントの確認、「Embed」はそのリンクのコピー画面が表示されています。
  
  「Embed」の<link>を選択して、コードをそのままコピーします。
  
  コピーしたコードは、HTMLの「head」タグの中に貼り付けて完了です。
  <head>
  
  <link href="https://fonts.googleapis.com/....." rel="stylesheet">
  
  </head>
3. CSSでフォントを指定する
  
  CSSで選択したフォントを適用します。
  
  先ほど公式サイトでリンクをコピーした画面に戻って、CSSの「font-family」の書き方を参考にしてフォントを指定します。
  
  今回は2つのフォントを一括で指定するために、下記のように「英数字」「日本語」「sans-serif」の順番で指定します。
  body {
  font-family: 'Satisfy', 'Sawarabi Mincho', sans-serif;
  }

リンクのURLの解説

リンクのURLの分解してどんな構造なのか確認してみましょう。

これを知らないと使えないということではないので安心してください。

知っておくと編集や管理が楽になるので、余裕があるときに確認してみて下さい。

family=Satisfy

「fonts.googleapis.com/css2?」の後に続く「family」について解説します。

「family=」に入る値は選択したフォントの名前が入ります。

今回は「Satisfy」と「Sawarabi Mincho」のように複数選択したので、「&」で繋いでフォントを読み込んでいます。
display=swap

この値は、フォントを読み込み中の動作を指定しています。

「swap」はフォントが読み込み中は代替えフォント「sans-serif」が適用され、読み込み後にフォントが切り替わります。

フォントの読み込み中でも記事が読めるように設定しています。

CSSの「display」プロパティとは別物です。

<head>

</head>

どうですか？とっても簡単ですよね。

CDNのいいところは簡単に導入が出来るところなんです。

次はフォントをダウンロードして使う方法も紹介します。

ダウンロードして使う

<!DOCTTYPE html>

<head>

...

</head>

<body>

<h1>ヒツジのおはなし</h1>

<p>Hello everyone !!</p>

<p>このサイトの主のヒツジです。</p>

</body>

</html>

@font-face {

font-family: Satisfy;
font-display: swap;
src: url("../fonts/Satisfy/Satisfy-Regular.ttf") format("TrueType");

}
@font-face {

font-family: Sawarabi Mincho;
font-display: swap;
src: url("../fonts/Sawarabi_Mincho/SawarabiMincho-Regular.ttf") format("TrueType");

}
body {

font-family: 'Satisfy', 'Sawarabi Mincho', sans-serif;

}

ひつじのおはなし

Hello everyone !!

このサイトの主のヒツジです。

フォントをダウンロードして使う

リンク:GoogleFonts公式サイト

ダウンロードして導入する

Google Fonts公式サイトから使いたいフォントをダウンロードして、フォントデータを読み込んで表示します。
1. 使いたいフォントを選択する
  
  Google Fonts公式サイトから使いたいフォントを探して選択します。
  
  使いたいスタイルのフォントを選択したら、「 Download family」をクリックしてダウンロードします。
  
  Web練習フォルダ/
  ├index.html
  └css/
  └main.css
  └fonts/
  └Satisfy.zip
  
  ダウンロード先は新しく作成した「fonts」ファイルの中に保存します。
  
  同じようにして、「fonts」ファイルの中に使いたいフォントをダウンロードしていきます。
2. zipファイルの解凍
  
  保存したzipファイルを解凍します。
  
  解凍されたファイルは、いろんなスタイルのフォントデータが入っています。
  
  Web練習フォルダ/
  ├index.html
  └css/
  └main.css
  └fonts/
  └Satisfy.zip
  └Satisfy/
  └Satisfy.ttf
  
  フォントデータは「ttf」という拡張子で、「TrueType」という形式で出来ています。
3. フォントデータを読み込む
  
  フォントを適用させるためには、CSSで3つの設定が必要になります。
  
  @font-faceを使って、「フォント名」「読み込み中の動作」「リンクと形式」の3つの設定を行います。
  1. フォント名
    
    「font-family」プロパティでフォントの名前を設定します。
    
    今回は「Satisfy」という名前に設定します。
    
    フォントの名前は自由に決めることが出来ます。
    
    例えば、わかりやすいように「Main」というフォント名にすることも可能です。
    
    この場合の「font-family」はフォントの指定ではなく、フォントの名前を設定してします。
  2. 読み込み中の動作
    
    フォントの読み込み中の動作を「font-display」プロパティで設定します。
    
    値を「swap」に設定します。
    
    「swap」は読み込み中は代替えフォント「sans-serif」が適用され、読み込みが完了するとフォントが切り替わります。
  3. リンクと形式
    
    CSSでフォントデータがあるファイルまでのリンクを設定します。
    
    「src」でフォントデータがあるファイルまでファイルパスを設定します。
    
    Web練習フォルダ/
    ├index.html
    └css/
    └main.css
    └fonts/
    └Satisfy/
    └Satisfy.ttf
    
    今回はCSSファイルの「main.css」からフォントデータの「Satisfy-Regular.ttf」を読み込むようにファイルパスを設定します。
    
    さらに、フォントの形式(format)を設定します。
    
    フォントの形式を「TrueType」という形式を設定して完了です。
  @font-face {
  font-family: Satisfy;
  font-display: swap;
  src: url("../fonts/Satisfy/Satisfy-Regular.ttf") format("TrueType");
  }
4. フォントを適用する
  
  CSSでフォントを適用します。
  
  先ほど設定した「フォント名」を使ってフォントを指定します。
  
  今回は「Satisfy」と「Sawarabi Mincho」を指定します。
  
  もしフォント名の設定で「Satisfy」を「Main」と名前をつけた場合は、「Satisfy」の部分を「Main」に置き換えて指定してください。
  body {
  font-family: 'Satisfy', 'Sawarabi Mincho', sans-serif;
  }

フォント形式

フォント形式はいくつか種類があります。

今回使用した形式は「TureType」という形式です。

他にも「OpenType」という形式があるので、場合によっては使い分けが必要です。

TrueType

この形式は広く普及しているフォント形式で対応してる環境が多いのが特徴です。

フォントデータの拡張子が「ttf」になっているものは「TrueType」のフォントです。

今回の「Satisfy」と「Sawarabi Mincho」の拡張子は「ttf」なので、「TrueType」のフォント形式になります。
OpenType

この形式は「TrueType」より新しい形式で、収録字体数などが大きく進化したフォント形式です。

フォントデータの拡張子が「otf」が「OpenType」のフォントです。

有料のフォントがこの形式が多いので、拡張子が「otf」のフォントデータは「OpenType」を設定します。