CSSでフォントを設定しよう【Webフォント・font-family】

Contents

font-familyを使う場合

font-familyプロパティは、主にWebサイトやHTMLメールのフォントを指定するために使用されます。

font-familyを使うコツとして、あらゆる閲覧環境を想定し、できるだけ多くの環境に対応したフォントを指定しておくことが重要になってきます。

このfont-familyは基本的にcssのbodyタグに設定することが多いですが、ある一部分だけこのフォントにしたいという場合にも、このプロパティを使い設定することができます。

記述方法はfont-familyプロパティに「フォントファミリー名」や「総称フォント」を指定することで、フォントの設定をすることができます。

複数フォントを指定する場合は、,（カンマ）で区切ります。

body {
font-family: "フォントファミリー名","総称フォント";
}

font-familyに複数のフォントを指定した場合、前に書いたフォントから優先されるので、使いたいフォントを前に設定します。

body {
font-family:　Arial, Helvetica,"ヒラギノ角ゴシック",sans-serif;
}

※font-familyに指定するフォントファミリー名は、正式な名称で指定する必要があります。
少しでも間違えていたり、本来含まれていないはずのスペースや全角・半角などがあると機能しなくなるので、気をつけましょう。

Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出す技術です。

Webフォントを使用することで、指定したフォントが閲覧者のPCにインストールされていないと、別のフォントが代用されてしまい、作成者が意図しない見え方になってしまう問題を解決することができます。

Webフォントの種類は色々ありますが、今回はGoogle fontsで説明していきます。

Google fontsでの記述法方は以下の手順になります。

Google Fontsの方はインターネット上から直接フォントを持ってくるやり方ですが、このWebフォントは好きなフォントファイルをダウンロードして、Webサーバにアップし設定する方法になります。

こちらの方法は、Google Fontsにないフリーフォントを使いたい場合や、Noto系の日本語フォントをサブセット化して使いたい場合などに非常に便利になります。

root/
 ├ font/
 │  ├ Font.woff
 │  └ Font.ttf
 ├ style.css
 └ index.html

読み込むフォントの種類は「.woffファイル」「.ttfファイル」「.woff2ファイル」「.otfファイル」が使用可能です。

@font-face {
  font-family: '任意のWEBフォント名';
  src: url('読み込むフォントファイルのパス') format('フォーマット名');
}

@font-face {
  font-family: 'font';
  src: url('./font/Font.woff') format('woff'),
       url('./font/Font.ttf') format('truetype');
}

'font'という名前でWEBフォントが使用できるようになり、WOFF形式に対応していないブラウザでは TTF形式のフォントが読み込まれるようになります。

body {
font-family:　"font";
}

フォントを指定したい場所にfont-familyを設定し、フォント名を上で設定したものにすることで設定が完了します。