LoginSignup
7

More than 3 years have passed since last update.

Webフォント全景

Last updated at Posted at 2018-12-16

はじめに

日本語のWebフォントを使う機会も増えてきたので、
Webフォント全般の情報をまとめました。
Webフォントの使い方はざっくり分けて2つあります。

  • セルフホスティング(自前のサーバーにフォントデータを置く)
  • クラウド(フォントサービスの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';
}

> MDN/@font-face

クラウドについて

  • 費用が発生するサービスが多い。
  • クライアントワークの場合はデザイン時から相談する必要がある。
  • 使用している文字を判別し、自動でサブセット化してくれる。
  • 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とか。
  • バリアブルフォントやカラーフォントについて、情報をまとめたり作ったりしたい。

などがあります。次の機会に!

参考資料

> Webフォントを120% 活用するための基礎知識&最新動向(Adobe Max Japan 2018)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7