#はじめに
日本語のWebフォントを使う機会も増えてきたので、
Webフォント全般の情報をまとめました。
Webフォントの使い方はざっくり分けて２つあります。
- セルフホスティング（自前のサーバーにフォントデータを置く）
- クラウド（フォントサービスのwebサーバーから取得する）
#セルフホスティングについて
- フォントのデータを持っていることが前提。
- フォントのライセンスに注意が必要。
- 欧文フォントならば文字数が少ないので容量的に問題ないが、日本語フォントは文字数が多いので減らす（サブセット化）必要がある。
- あらかじめサブセット化してからアップするため、動的な内容には対応できない。
- 本文ではなく、見出しだけといった限定的な使用が妥当。（それならSVGにした方が良さそう…）
- 自作したwebフォントはこの方法で使用する。
- モリサワのwebフォントサービスTypesquareではセルフホスティングが可能。
// 設定例
@font-face {
font-family: 'FontName';
src:
local('Local Font Name'),
url('/assets/font/FontName.woff2') format('woff2'),
url('/assets/font/FontName.woff') format('woff');
font-weight: normal;
}
// 使用例
p {
font-family: 'FontName';
}
#クラウドについて
- 費用が発生するサービスが多い。
- クライアントワークの場合はデザイン時から相談する必要がある。
- 使用している文字を判別し、自動でサブセット化してくれる。
- apiが用意されており、JavaScriptで動的に表示する文字にも対応できる。
- 使用できるフォントの種類が多い。
代表的なサービス
日本語のウェブサイトをつくる時、よく使用する4つのサービスを紹介します。
- Google fonts
- Adobe Fonts
- FONTPLUS
- Typesquare
Google Fonts
https://fonts.google.com/
フリー。2018年に日本語が正式に追加されました。https://fonts.google.com/?subset=japanese
使用方法は、フォント名の横にある ＋ ボタンをクリックし、生成されたlinkコードをhtmlにコピペするだけです。
フォントデータを分割してロードする（unicode-rangeサブセット）します。
使用する文字だけロードするダイナミックサブセットは非対応です。
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
p {
font-family: 'Noto Sans JP', sans-serif;
}
Adobe Fonts
https://fonts.adobe.com/
Adobe CC契約していたらWebフォントをドメイン数やアクセス数を気にせず使い放題です。
いちばん安いAdobeCCフォトプランなら月に980円。
Adobeのアプリで使用したフォントは全てWebフォントにすることができるので、デザインと実装でフォントを揃えることができます。
> 設定方法 + JavaScript API
FONTPLUS
https://webfont.fontplus.jp/
Fontworksのサービス。
料金はPVに合わせて発生します。大規模なサービスや特殊な使い方の場合は別途相談。
> プラン
> 設定方法
> JavaScript API
Typesquare
https://typesquare.com/ja/
モリサワのサービス。
料金はPVに合わせて発生します。大規模なサービスや特殊な使い方の場合は別途相談。
セルフホスティング（自前のサーバーにフォントデータをアップして使う方法）でも使用可能です。
MORISAWA PASSPORTを契約している場合、1,000万PV/年まで使用できます。
> プラン
> 設定方法
> JavaScript API
#まとめ
全体全般をざっくりまとめました。
今後の課題としては、
- まだ使用したことない欧文フォントのサービスについて知りたい。
- ロード関係について詳しくまとめたい。ちらつき（FOUT）問題とか、最近使えるようになった
font-displayとか。 - バリアブルフォントやカラーフォントについて、情報をまとめたり作ったりしたい。
などがあります。次の機会に！