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

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

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

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

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

フォントってなに？

文字の見た目のこと

WEB FONTS

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

ホームページの印象を変えたい時の1つの方法として、文字のフォントを変えることが出来ます。

フォントを変えるには？

フォントを変更するには、CSSで変更することが出来ます。

ただし、変更するにはフォントデータというファイルが必要になります。

実はそのフォントデータはすでにあなたのパソコンやスマホの中に入っています。

CSSでそのフォントを指定することで変更が出来ます。

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

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

フォントを変更する

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

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

Courier
Meiryo UI
Wawati SC
ヒラギノ明朝 ProN
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;

}

Courier (第1候補)

Courier

英数字

第1候補の「Courier」は英数字のフォントです。

「A〜Z」「0〜9」のフォントが変化します。

対応しているOSは「Windows」「Mac」「Android」「ios」に対応しているので、ほぼすべての端末で適用されます。

Meiryo UI (第2候補)

Meiryo UI

日本語

第2候補の「Meiryo UI」は日本語のフォントです。

「ひらがな」「カタカナ」「漢字」のフォントが変化します。

対応しているOSは「Windows」のみで、その他のOSではフォントは適用されません。

Wawati SC (第3候補)

Wawati SC

日本語

第3候補の「Wawati SC」は日本語のフォントです。

「ひらがな」「カタカナ」「漢字」のフォントが変化します。

対応しているOSは「Mac」のみで、その他のOSではフォントは適用されません。

ヒラギノ明朝 ProN (第4候補)

ヒラギノ明朝 ProN(Hiragino Mincho ProN)

日本語

第4候補の「ヒラギノ明朝 ProN」は日本語のフォントです。

「ひらがな」「カタカナ」「漢字」のフォントが変化します。

フォント指定する時は、日本語(ヒラギノ明朝)と英語(Hiragino Mincho)の両方を指定します。

対応しているOSは「Mac」「ios」のみで、その他のOSではフォントは適用されません。

sans-serif (第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を使って変えてみましょう。

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>

...

<link href="https://fonts.googleapis.com/css2?family=Satisfy&family=Sawarabi+Mincho&display=swap" rel="stylesheet">

</head>

<body>

<h1>ヒツジのおはなし</h1>
<p>Hello everyone !!</p>
<p>このサイトの主のヒツジです。</p>

</body>

</html>

body {

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

}

ひつじのおはなし

Hello everyone !!

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

CDNでフォントを導入する

リンク:Google Fonts公式サイト

CDNで導入する

Google Fonts公式サイトから使いたいフォントを選択して、リンクからフォントを提供してもらえるようにします。

使いたいフォントを選択する

Google Fonts公式サイトを開いて、使いたいフォントを探していきます。

今回は、Sawarabi Minchoのフォントを選択して、フォントの太さは「Regular 400」を取得します。

使いたいフォントを選択したら「Select Regular 400」をクリックします。

画面の右側に、選択したフォントが表示されていれば完了です。

太いフォントを使いたい時は「Regular 700」など数値が高いものを選ぶことも可能です。
CDNのリンクをコピー

画面右側のタブにある「Use on the web」からCDNのリンクをコピーします。

CDNでのフォントの取得方法は「link」と「@import」がありますが、特に理由がない場合は「link」を選択しましょう。

HTMLの「linkタグ」が表示されている状態で、アイコン「」でコードをコピーをします。

コピーしたコードは、HTMLの「head」タグの中に貼り付けて完了です。

<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=Sawarabi+Mincho&display=swap" rel="stylesheet">
</head>
CSSでフォントを指定する

CDNから取得したフォントをCSSで適用します。

先ほどと同様に、画面右側のタブに表示されているCSSのコードを、アイコン「」でコードをコピーをします。

CSSの「body」に対して、コピーしたCSSを貼り付けをします。

body {
font-family: 'Sawarabi Mincho', sans-serif;
}

CDNの解説

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

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

GoogleAPIから基本情報を取得

Google Fontsを使うには、まず先にGoogleの「API」と「fonts」に関するデータを取得する必要があります。

下記の部分は、Google Fontsを利用する上で必要になるので注意しましょう。

任意のフォントを取得するURL

Google Fontsから選択したフォントを取得する際の「URL」についての解説です。

下記の部分は、選択したフォントデータを実際に読み込むためのURLです。

family=Sawarabi+Mincho

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

URL内のある「family=」の部分で、任意のフォントを取得することが出来ます。

今回のように「Satisfy」と「Sawarabi Mincho」といった複数選択の場合は、URLには「family=」が２つ存在します。

display=swap

URL内のある「display=swap」は、フォントデータを取得する際の動作を指定しています。

この「display=swap」は、Google Fontsのフォントを取得中の場合はフォントは適用せず、取得完了後に任意のフォントに切り替わります。

もし「display=swap」がなかった場合は、フォントの取得が完了するまでページ内のテキストは表示されません。

フォントが取得出来るまで文字が表示されないのは、利用者にとってストレスになるので「display=swap」は残しておきましょう。

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

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 !!

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

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

リンク:Google Fonts公式サイト

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

Google Fonts公式サイトから使いたいフォントをダウンロードしてフォントを適用します。

ダウンロードしたフォントデータをCSSで読み込みフォントを適用します。

フォントをダウンロードする

Google Fonts公式サイトから使いたいフォントを探して選択します。

使いたいスタイルのフォントを選択したら「 Download family」をクリックしてダウンロードします。

ダウンロード先は、下のように新しく作成した「fonts」フォルダの中に保存します。

その他使いたいフォントがある場合は、同じように「fonts」フォルダの中にダウンロードしておきましょう。

Web練習フォルダ/
├index.html
└css/
└main.css
└fonts/
└Satisfy.zip
zipファイルの解凍

圧縮されているzipファイルを解凍します。

zipファイルを解凍すると、ダウンロードしたフォント名のフォルダが作成されます。

その中に「ttf」もしくは「otf」という拡張子のファイルが格納されています。

今回の例では「Satisfy」のフォントをダウンロードしたので「Satisfy.ttf」が格納されています。

Web練習フォルダ/
├index.html
└css/
└main.css
└fonts/
└Satisfy.zip
└Satisfy/
└Satisfy.ttf
フォントデータを読み込む

CSSでフォントデータを読み込むには、CSSで3つの設定が必要になります。

CSSの@font-faceを使って「フォント名」「読み込み中の動作」「リンクと形式」の3つの設定を行います。

今回は、CSSファイルの「main.css」からフォントデータの「Satisfy.ttf」までの相対パスを指定して読み込みます。

そして、フォーマットタイプは「TrueType」を指定します。

Web練習フォルダ/
├index.html
└css/
└main.css
└fonts/
└Satisfy.zip
└Satisfy/
└Satisfy.ttf

@font-face {
font-family: Satisfy;
font-display: swap;
src: url("../fonts/Satisfy/Satisfy-Regular.ttf") format("TrueType");
}
フォントを適用する

読み込んだフォントデータをCSSで適用します。

先ほどの「@font-face」で設定したフォント名「Satisfy」をCSSで適用します。

body {
font-family: 'Satisfy', sans-serif;
}

@font-faceとは？

CSSの「@font-face」はフォントデータの取得とフォント名を設定することが出来ます。

ダウンロードしたフォントをCSSで適用する際に必要になります。

フォント名を定義

CSSでフォントを適用する際のフォント名を定義します。

@font-faceでは、フォント名を自由に定義することが出来ます。

@font-face {

font-family: Satisfy;

}

読み込み方法

フォントデータを読み込む際のテキスト部分表示について設定を行います。

CSSの「font-display」の値の「swap」に指定します。

この「font-display: swap」は、フォントデータが読み込まれている最中は、フォントが適用されません。

フォントデータの読み込みが完了後にフォントが置き換わるようにします。

この設定がない場合は、フォントの読み込みが完了するまでページ内のテキストは表示されません。

@font-face {

font-family: Satisfy;
font-display: swap;

}

フォントデータの読み込み

CSSファイルからフォントデータまでの相対パスを指定して、フォントデータを読み込みます。

@font-face {

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

}

フォント形式

フォントデータを読み込む際に、フォント形式も指定しなくては正常に読み込むことが出来ません。

フォント形式には主に「TrueType」と「OpenType」の2種類あります。

参考サイト:Beginner's Design Note

TrueType

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

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

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

OpenType

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

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

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

@font-face {

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

}

はい！GoogleFontsの2つの使い方を紹介しました。

実際のところCDNの方法が簡単に導入ができて、かつ読み込みが早いのでおすすめです。

デザインレシピ