CSSリファレンス

実践向け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-variantfont-variantプロパティの値を指定することができます
font-stretchfont-stretchプロパティの値を指定することができます
font-weightfont-weightプロパティの値を指定することができます
font-stylefont-styleプロパティの値を指定することができます
unicode-rangefont-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>

 

仕様書

関連CSSプロパティ

閉じる