WEBフォントといえば Goofle Fonts が大人気ですが、フリーフォントをサーバーにアップロードしてWEBフォントとして使うこともできます。
Google Fontsにないフリーフォントを使いたい場合や、Noto系の日本語フォントをサブセット化して使いたい場合などに非常に便利。
ただ、久しぶりに使うと@font-faceの書き方を忘れてしまいがちなので、一度整理しておこうと思います。
このメモにおける前提条件
今回の例で読み込むフォントファイルと、@font-face規則 を指定するCSSファイル(style.cssとします)とのディレクトリ関係は以下とします。
サーバー内のディレクトリ構造
root/
├ font/
│ ├ My_Font.woff
│ └ My_Font.ttf
├ style.css
└ #...その他ファイル読み込むフォントの種類は.woffと.ttfファイルの2種類と仮定していますが、その他にも、WEBフォントには.woff2ファイルや.otfファイルが使用可能です。
基本的にには、.woffと.ttfで十分です。
@font-face規則の書き方
@font-face規則を使用することで、サーバー内にあるフォントファイルを指定して、任意のフォント名を名付けることができます。
一般的な@font-face規則 の基本形
@font-face {
font-family: '任意のWEBフォント名';
src: url('読み込むフォントファイルのパス') format('フォーマット名');
}
@font-faceの実際の書き方
@font-face {
font-family: 'myfont';
src: url('./font/My_Font.woff') format('woff'),
url('./font/My_Font.ttf') format('truetype');
}上記の指定によって、'myfont'という名前でWEBフォントが使用できるようになり、WOFF形式 に対応していないブラウザでは TTF形式 のフォントが読み込まれるようになります。
このように、font-familyプロパティにフォント名を、srcプロパティにはurl情報とformat情報をセットで指定します。
srcプロパティは複数セットを,区切りで列挙可能です。
WOFF形式 に対応していないブラウザはAndroid4.3以前の標準ブラウザや、Opera miniなどのごく一部のブラウザですので、これらに対応する必要なければTTF形式の指定は不要です。
この他に、font-weight や font-family なども指定することができます。
詳しいプロパティの使い方などは@font-face | MDNをご覧ください。
WEBフォントを適用させたい要素にfont-familyを指定する
最後に、WEBフォントを適用させたい要素のfont-familyプロパティに指定してあげれば完了！
例：CSSでWEBフォントを適用させる
.myfont {
font-family: 'myfont', sans-serif;
}念のため、'myfont'が読み込めなかった場合の代替フォントも指定しておくといいでしょう。
ブラウザ対応状況と諸注意
- ブラウザ対応
WOFF2形式や@font-faceの各プロパティごとのブラウザ対応は こちら で確認できます。 - ライセンスは確認しよう
WEBフォントとして使用していいフォントかどうか、使いたいフォントのライセンスは必ず確認しておきましょう。 - 日本語フォントについて
日本語フォントを読み込む時は、使うことのない難しい文字をあらかじめ削除すること（サブセット化）をオススメします。
