使用するフォントを指定する

CSS - @font-face

概要

CSSプロパティ｢@font-face｣を指定すると、webフォントを使用することができるようになります。そもそもユーザーはWebページを閲覧する際には、その閲覧しているPCまたは端末にインストールされているフォントで表示が行われます。しかし、このプロパティを使用すると、指定されたインターネットサーバー上のフォント（webフォント）を使用するので、ユーザーのフォント環境に左右されることなく、製作者の意図したフォントでの表示をすることができます。

<p>フォント指定なしです</p>
<p class="font-face">googleフォントを適用します</p>
<style>
/*
 * Nico Moji (Japanese) https://fonts.google.com/earlyaccess
 */
@font-face {
  font-family: 'Nico Moji';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/nicomoji/v1/NicoMoji-Regular.eot);
  src: url(//fonts.gstatic.com/ea/nicomoji/v1/NicoMoji-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nicomoji/v1/NicoMoji-Regular.ttf) format('truetype');
}
  .font-face {
    font-family: "Nico Moji";
  }
</style>

ただし注意しなければならないのは、閲覧するタイミングでフォントデータのダウンロードが行われるので、ファイルのデータサイズや、あまりにも多くのフォントを使用するとページの読み込み速度が遅くる場合もあり、ユーザーにとってマイナスに働く面もあるので注意しましょう。

値の指定方法

@font-face: {
  font-family: 'フォント名';
  src: url(フォントがあるurl);
  [option]
}

指定必須である｢フォント名｣、｢url｣の他に｢option｣で指定できるプロパティがあるので以下にまとめました。

必須項目

値	説明
font-family	フォント名を指定します
src	フォントのurlを指定します

オプション項目

プロパティの詳細ついては各ページを参照してください。

値	説明
font-variant	font-variantプロパティの値を指定することができます
font-stretch	font-stretchプロパティの値を指定することができます
font-weight	font-weightプロパティの値を指定することができます
font-style	font-styleプロパティの値を指定することができます
unicode-range	font-face 規則で定義するUnicodeコードポイントの範囲です

フォントの形式について

Webフォントのファイル形式の一覧です。指定するときはフォントのURLに続けて、半角スペースで区切って記述します。またカンマで区切って複数指定することができます。

形式	説明
format("woff")	Web Open Font Formatフォントです。
format("truetype")	TrueTypeフォントです。
format("opentype")	OpenTypeフォントです。
format("embedded-opentype")	Embedded-OpenTypeフォントです。Internet Eplorer 8以前で必要とされる形式です。
format("svg")	SVGフォントです。

このファイル形式ですが、閲覧する環境によって、対応しているフォントのファイル形式が異なっています。ですので、様々な環境で意図する表示を行う場合は複数指定が必要かもしれませんが、多くのブラウザーの最新バージョンのみの対応であれば、woff(Web Open Font Format)の記述のみでもよいかもしれません。

@font-face {
font-family: "フォント名";
  src: url(font/example-font.woff) format("woff");
}

プロパティの種類について

｢font｣プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。

プロパティ名	説明
font	フォントに関する指定をまとめて行うショートハンドプロパティ
font-style	フォントのスタイルを指定する
font-variant	フォントのスモールキャップ指定する
font-weight	フォントの太さを指定する
font-size	フォントのサイズを指定する
font-family	フォントの種類を指定する
font-size-adjust	フォントのサイズを調整する
font-stretch	フォントを縦長・横長にする

使用例

無料で使用できるGoogle Fontsをつかったサンプルコードです。 @import でgoogleフォントの使用したいcssを指定しており、font-family プロパティで該当のfont名を指定します。

<p>フォント指定なしです</p>
<p class="font-face">googleフォントを適用します</p>
<style>
@import url('https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css');
.font-face {
  font-family: "Rounded Mplus 1c";
  font-size: 20px;
}
</style>