CSS辞典 @font-face規則の解説

ギフト・ポイントGet!
css辞典 CSS辞典
この記事は約9分で読めます。

Webフォントの利用を指定する「@font-face規則」の使用方法について掲載

CSS3/2.1

スポンサーリンク

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

概要・使用方法

@font-face{
     font-family:フォント名;
     src:フォントのURL;
     フォントの形式;
     オプション;
     }
font-family:"フォントに付ける名前"
src: url("フォントファイルへのパス");

Webフォントの利用を指定する「@font-face」で指定します。WebフォントとはフォントファイルをWeb上に配置し、それをブラウザが読み込むことで、どの環境でも同じフォントが表示される仕組みのことです。また、ローカルPCにインストールされたフォントを適用することもできます。Webフォントは外部サービス(GoogleFontsやAdobeFontsなど)が使用できるほか、個別サーバーに配置して配信させることもできます。

srcプロパティでは、フォントファイルの保存先(キーワード「url」または「local」)や使用するファイル名と場所(相対URLなど)、フォントフォーマットなどの値を以下のような形式で指定します。

  • src: url(“フォントファイルのURL”)
  • src: url(“フォントファイルのURL”) format(“フォントフォーマット”)
  • src: local(フォントファイル名), url(“フォントファイルのURL”), url(“フォントファイルのURL”) format(” フォントフォーマット”)

また、カンマ(,)区切りで複数指定できます。その場合は、先に指定したファイルから優先にユーザーブラウザで利用できるフォントを表示します。

使用する際はフォントファイルのライセンスを確認する必要があります。また、日本語の場合は、データ量が多く読み込みに時間がかかる場合があります。

※WebフォントはCSS3から導入された仕様です。

@font-faceルールで指定できる記述子

記述子説明
font-family値には、フォント名(フォントファミリー名)を指定する。(必須)
src値には、フォントファイルのURLやファイル名、フォントフォーマットを指定する(必須)
font-style/font-weight/font-stretch文字の書式を指定する。初期値はいずれも「normal」。値の指定については、font-styleプロパティ、font-weightプロパティ、font-stretchプロパティを参照
unicode-rangeフォントがサポートするUnicode文字の範囲を指定できる。初期値は「U+O-10FFFF」(すべて)
font-variant/font-feature-settingesフォントの表示時に適用される追完の設定機能を指定できる。初期値はいずれも「normal」。font-variantプロパティ、font-feature-settingsプロパティを参照

WOFF(Web Open Font Format)は、W3Cによって標準化が進められているフォントフォーマットで、Internet Explorer 9を含め、最新のブラ形式のフォントをサポートしています。

フォント名

フォント名任意のフォント名を指定します。font-family、fontプロパティを使うときに、この値を指定すると、@font-face規則で指定したWebフォントで表示されます。

フォントのURL

url()関数型の値です。WebフォントのファイルがあるURLを指定します。

フォントの形式

Webフォントのファイル形式を以下のように指定します。フォントのURLに続けて、半角スペースで区切って記述します。フォントのURLとフォントの形式のセットは、カンマ(,)で区切って複数指定できます。

format(“woff”)Web Open Font Formatフォント.woff
format(“truetype”)TrueTypeフォント.ttf
format(“opentype”)OpenTypeフォント.ttf、.otf
format(“embedded-opentype”)Embedded-OpenTypeフォント。InternetExplorer8以前で必要とされる形式.eot
format(“svg”)SVGフォント.svg、.svgz

オプション

font-styleフォントのスタイルを指定
font-weightフォントの太さを指定
font-stretchフォントの幅を指定
font-variantフォントのスモールキャップを指定
font-feature-settingsOpenTypeフォントの使用を指定
unicode-rangeWebフォントの適用範囲

主なフォントサービス

フォントサービスを利用すると様々な外部フォントが利用できます。

フォントURL費用
Google Fontshttps://fonts.google.com無料
Adobe Fontshttps://fonts.adobe.com無料・有料
FONTPLUShttps://fontplus.jp/月間PV数により有料
TypeSquarehttp://typesquare.com/月間PV数により有料
Font Squirrelhttp://www.fontsquirrel.com/無料・有料

サンプル

@font-face規則のfont-familyプロパティでフォント名を指定しています。srcプロパティでは、local()でユーザー環境に指定フォントがあるか調べなければurl()でWebフォントを表示します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Webフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          @font-face {
            font-family: 'Noto Sans JP';
            src: local('NotoSansJP'),
            url('https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff') format('woff');
            font-style: normal;
            font-weight: 100;
          }
          p.webfont{
            font-family: 'Noto Sans JP';
          }
    </style>
  </head>
  <body>
      <p>Webフォントサンプルです(Webフォント未適用)</p>
      <p class="webfont">Webフォントサンプルです(Webフォント未適用)</p>
  </body>
</html>
実行結果

Webフォントサンプルです(Webフォント未適用)

Webフォントサンプルです(Webフォント未適用)

chrome 実行サンプル

@font-faceのchromeブラウザの実行結果

Firefox 実行サンプル

@font-faceのfirefoxブラウザの実行結果

edge 実行サンプル

@font-faceのedgeブラウザの実行結果

opera 実行サンプル

@font-faceのoperaブラウザの実行結果

GoogleFontsの使用方法

Browse Fonts - Google Fonts
Makingthewebmorebeautiful,fast,andopenthroughgreattypography

GoogleFontsのサイトにアクセスします。

GoogleFonts一覧

GoogleFontsの一覧から目的のフォントを選択します。

GoogleFonts Hide selected families選択

「Hide selected families」(赤枠)をクリックします。

GoogleFonts select this style選択

「select this style」(赤枠)を選択します。

GoogleFonts設置方法

設置方法は、ダウンロードする方法、<link>要素と@importプロパティの3種類の方法があります。もっとも簡単な方法は、赤枠で記載されたプロパティやタグを自分が作成したHTMLファイルに配置することです。

GoogleFontsのライセンス確認

使用する前にLicenseを確認します。「Open Font License.」であれば無料の自由なオープンソースライセンスです。

GoogleFonts使用方法サンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>GoogleFonts Webフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Fascinate&display=swap');
        p{font-size:150%;}
        p.webfont{font-family: 'Fascinate', cursive;}
    </style>
  </head>
  <body>
      <p>WebFont GoogleFontSample</p>
      <p class="webfont">WebFont GoogleFontSample</p>
  </body>
</html>
実行結果

WebFont GoogleFontSample

WebFont GoogleFontSample

chrome 実行サンプル

GoogleFontsのchromeブラウザの実行結果

Firefox 実行サンプル

GoogleFontsのfirefoxブラウザの実行結果

edge 実行サンプル

GoogleFontsのedgeブラウザの実行結果

opera 実行サンプル

GoogleFontsのoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました