（ちょっとメモ）@font-face で Webフォントを使おう

今回は、CSS の @font-face を使ってみましょう。
これは、@規則と呼ばれるものの１つで、外部のフォントデータを読み込んだり（いわゆる Webフォントってやつ）、システム内のフォントデータを呼び出したりできます。

本日のINDEX

1. CSSの @-規則（CSS At-rules）
2. @font-face の使い方
   1. 最小限「font-family」と「src」を指定する
   2. src には「url」と「local」がある
   3. その他の記述子
3. @font-face は「同一ドメイン制限」がある
4. Google Fonts で Webフォントを使おう
   1. Google Fonts には日本語フォントもある

参考：
・@font-face - CSS | MDN
・@-規則 - CSS | MDN

CSSの @-規則（CSS At-rules）

@font-face は、CSSの「@-規則（At-rules）」に属するルールです。
（参考：@-規則 - CSS | MDN）

@-規則 にはこのほかに、@charset、@supports、@import、@media など いろいろあります。
@charset は CSSファイルの 文字エンコード を定義するもので、すでに [12-1] CSSを外部ファイルにしよう で使っています。
@supports は、CSSのベンダープレフィックスに替わるもの（？）として、（ちょっとメモ）CSS の ベンダープレフィックス についてで紹介しています。
@import は、外部CSSファイルを CSS内にインポートする時に使います。
@media は、CSSを メディアタイプやデバイスなどの条件によって切り替えます。
@import、@media については、（ちょっとメモ）CSSの @import と @media（メディアクエリ）をご覧ください。

今回は @font-face を使ってフォントデータを設定します。

@font-face の使い方

@font-face は、フォントデータを外部ファイルとして HTML内にダウンロードさせることができます。
ユーザのコンピュータにあるフォントに依存しなくて済むので、どの OS、どのブラウザバージョンでも、同じフォントを表示させることができます。

また、ローカルフォント（ユーザーの システム に入っているフォント）も扱えます。
ローカルフォントを複数まとめて フォントファミリーとして扱うなどができます。

最小限「font-family」と「src」を指定する

@font-face は、少なくとも「font-family」と「src」を指定します。

@font-face {
   font-family: MyFont;
   src: url('../fonts/myfont.woff') format("woff");
   }

font-family: で、任意の名前をつけます。（コレは後で呼び出すための名前です）
名前には「引用符（' ' か " " ）」を付けますが、無くてもOK。

src: で、フォントデータのある場所を指定します。
上のサンプルでは、url( ) で外部フォントデータを呼び出しています。
（local( ) でローカルフォントを呼び出すこともできます）

src: では、呼び出すフォントのフォーマットを format( ) で指定できます。
( ) の中にフォーマット名を「 " "（ダブルクォーテーション）」または「 ' '（シングルクォーテーション）」で囲んで指定します。上のサンプルでは woff を指定しています。
フォーマットが複数ある場合は、（）内で「,（カンマ）」で区切って並べます。
フォーマットはオプションなので、無くてもOK。

Webフォントのフォントフォーマットは、OpenType（OTF）が主流でしたが、今後は WOFF（Web Open Font Format）になって行くようです。
WOFF の実体は OpenTypeと同じですが、圧縮形式が違うのと、ヘッダ情報・メタデータ（著作権情報など）も含める形式になっているんだって。
WOFF は W3C で勧告済みで、IE9以降など ほとんどのブラウザがサポートしています。
WOFF2 は 今は勧告案で、IE11は未サポート。他は Edge も含めてサポート済み。ただし Sfari は Sierra版以上、iOS Safari は 10.2から。（2018年4月記）

あとは font-familyプロパティで、@font-face で付けた名前を呼び出すだけ。

h1 {
   font-family: MyFont;
   }

src には「url」と「local」がある

src: url( ) で外部フォントデータを呼び出し、src: local( )でローカルフォントを呼び出します。

url( ) で使用するパスは、相対パスでも絶対パスでも どっちでもOK。
「引用符（' ' か " " ）」を付けても、付けなくてもOKです。

local( ) は、ローカルフォントの「フォントファミリー名」を「引用符（' ' か " " ）」を付けて書きます。
呼び出すフォントが複数なら、local( ) を複数「,（カンマ）」で区切って並べます。

下は、「游ゴシック体」の指定で、ローカルフォントを2種類呼び出しています。

@font-face {
	font-family: YuGoM; /*任意の名前をつけます*/
	src: local("Yu Gothic Medium"), local("Yu Gothic");
	/*↑ローカルの Yu Gothic Mediumを見つけさせ、それがダメでも Yu Gothicを見つけさせています*/
	font-weight: 500;
    /*↑ウェイトを500（Medium）にしています*/
}
div {
	font-family: -apple-system, BlinkMacSystemFont, YuGothic, "游ゴシック Medium","Yu Gothic Medium", 
    YuGoM, /*＠font-faceのフォントを呼び出しています*/
	"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
    }

下のサンプルは、ローカルフォントを複数呼び出した後に、url( ) で外部フォントデータを呼び出しています（5行目）。
ユーザがフォントをインストールしていたら、それを使い（そのほうが軽い）、ローカルに無かったら外部フォントデータをダウンロードする、という指定です。

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://example.com/roboto.woff2) format('woff2');
  }

その他の記述子

@font-face は、「font-family」と「src」以外にも指定できる記述子があります。

上のサンプルでも font-weight、font-style を使っていますが、ほかに font-variant、font-stretch も指定できます。（フォントのためのプロパティが使えるってことですね）

また、unicode-range で Unicode コードポイントの範囲を指定できます。
これは複数ある場合は「,（カンマ）」で区切って並べます。

@font-face {
  font-family: 'MyRoboto';
  font-stretch: expanded;
  font-variant: small-caps;
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://example.com/roboto.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

@font-face は「同一ドメイン制限」がある

@font-face で、src: url( ) を使って外部フォントデータをダウンロードする場合、注意が必要です。

@font-face は「同一ドメイン制限」があります。これ重要。
普通、ブラウザにはこの制限がかかっていて、今表示しているサイトとは別のオリジン（ドメイン）のサーバーにあるファイルは、呼び出すことができないんです。
同じオリジンのサーバにあるファイルなら、アクセス権があるので呼び出せます。

ですので、Webフォントを使うときは、同じオリジン（ドメイン）のサーバ上に フォントファイルを置いて使うのが一般的。
自分が持っているフォントデータを Webフォントとして使う場合は、必ず使用するサイトと同じドメインに置いて使おう。
他のドメインから引っ張ってきても無理。表示しません。

ただし、サーバ側に CORS（Cross-Origin Resource Sharing）（オリジン間リソース共有）の処理をすれば、ブラウザは、その別オリジンのサーバへ アクセスができるようになるんだって。

これをしてくれてるのが Google Fonts をはじめとする、Webフォントサービスです。
これらのサービスを使うと、自分のサイトではない別のオリジン（ドメイン）に置いてあるフォントを呼び出すんだけど、ブラウザはちゃんと表示してくれるんだよね。

Google Fonts で Webフォントを使おう

というわけで、Webフォントの１つの Google Fonts を使ってみよう。

Google Fonts のサイトで好きなフォントを選びます。
（クリックで別ウィンドウで開きます）

フォントを選択したら、設定ダイアログを開いて、まずは「CUSTOMIZE（カスタマイズ）」で、必要なウェイトやスタイルを選択します。

「EMBED（エンベッド）」に戻って、ソースコードをゲット。
「STANDARD（スタンダード）」なら、HTMLの <head>要素内にコピペするコードが表示されます。

「@IMPORT（＠インポート）」なら、CSS内にコピペするコードが表示されます。
まるごとHTML上にコピペするか、CSSファイル内に <style>〜</style> の中身だけコピペして使います。

コピペするコードは、どちらも「外部CSSファイル」をHTMLに読み込ませるものです。
上の例のフォント（Yanone Kaffeesatz）の ファイルを試しにブラウザで開くと、下記のようなCSSファイルでした。@font-face でフォントを呼び出していますね。

/* cyrillic */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(https://fonts.gstatic.com/s/yanonekaffeesatz/v9/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qHHt6MDPo.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(https://fonts.gstatic.com/s/yanonekaffeesatz/v9/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qHHt6MDPo.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(https://fonts.gstatic.com/s/yanonekaffeesatz/v9/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qHHt6MDPo.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(https://fonts.gstatic.com/s/yanonekaffeesatz/v9/3y976aknfjLm_3lMKjiMgmUUYBs04Y8bH-qHHt6M.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

src: の書き方も、local( ) でローカルにフォントがないか確認し、最後に url( ) でフォントデータを呼び出しています。

Google Fonts には日本語フォントもある

Google Fonts は英語フォントがメインだけど、日本語フォントも「Google Fonts + 日本語 早期アクセス」で 現時点で完全にはサポートしていないフォントを試験的に提供 しているんだそうです。（2018年4月記）

試しに Google Fonts + 日本語 早期アクセス の「はんなり明朝」を使ってみます。

はんなり明朝
あかるく、やさしく、ふんわり。

上のサンプルのソースコードはこちら。

<div class="Hannari">
  <b>はんなり明朝</b><br>
  あかるく、やさしく、ふんわり。
</div>

<style>
@import url("https://fonts.googleapis.com/earlyaccess/hannari.css");
.Hannari {
	font-family:"Hannari","Hiragino Mincho ProN","HGS明朝E","メイリオ",Meiryo,serif;
    /*かな書体なので、漢字などの表示用に ↑ ヒラギノ明朝や HGS明朝E なども指定しておきます*/
	font-size:2rem;
	line-height:1.8em;
	color:black;
	margin:0;
	border:solid 1px #ccc;
	padding:.7em 1.2em}
.Hannari span {
	}
</style>

Google以外にも日本語用の Webフォントは いろいろあります。
「無料　日本語ウェブフォント」などとググれば けっこう出てきますし、有料のものならモリサワなどのメジャーなメーカーから購入できます。

フリーフォントを集めているサイト
・FONTBEAR.NET | 商用OKなフリーフォントを検索！

こちらは有料 Webフォントのサイト
・Webフォント TypeSquare [タイプスクウェア]（モリサワ）
※モリサワの Webフォントは「さくらのレンタルサーバ」「エックスサーバー」を借りてれば無料で使える（条件あり）そうです。
・Monotype ライブラリ・サブスクリプション | Monotype
約$10/月で 2200以上のフォントファミリーを利用できるそうです。

次回予告

次回は font-size-adjustプロパティを使ってみます。
文字サイズがどのフォントでも同じになるように調整するプロパティです。