源ノ角ゴシック・小塚ゴシック・小塚明朝など、AdobeのTypekitにて14種類の日本語Webフォントの提供が始まりました。今までTypekitの日本語フォントはアプリケーションでの利用に限定されていたため、Webフォントとして使えるのは今回が初めてです。
目次:
※Adobe Typekitのサービス内容は、2015年6月17日現在のものです。
※2015年10月9日追記:TypekitでモリサワとTypeBankのフォントが使えるようになりました
1. Adobe Typekitとは?
Adobe Typekitは、アプリケーションやWebサイトで使用できるフォントを提供するAdobeのサービスです。
Creative Cloudなら一部のプランを除き、Typekitの「ポートフォリオプラン」が初めから含まれていますので、フォントの種類やサイト数の制限なしに全てのWebフォントを使うことができます。また、無料プランでも4種類の日本語フォントが利用可能です。
無料プラン
- 800個以上のWebフォントから選択(4個の日本語フォントを含む)
- 25,000ページビュー / 月
- 1つのWebサイト
- 2個のファミリー / Webサイト
ポートフォリオプラン
- 4200個以上のWebフォントから選択(14個の日本語フォントを含む)
- 500,000ページビュー / 月
- Webサイトの数は無制限
- 無制限のファミリー / Webサイト
2. 日本語フォントを読み込んで重たくならない?
日本語Webフォントを使う際に気になるのがロード時間ですが、本文のテキストなどたくさんの文字列に適用した場合でも、比較的ストレス無く表示されるように感じました。
Adobeによると、「ダイナミック・オーグメンテーション」という技術によりページ中で使われている文字を検出して必要となる文字のみをロードし、ページが更新された場合も新しく追加された文字だけを読み込む仕組みになっているそうです。
3. Webフォントの使い方は?
使い方はとても簡単です。大まかな手順は以下の通りです。
- 使いたいフォントを選ぶ
- Webフォントを利用するドメインを登録
- フォントのウェイトやCSSセレクタを指定する
- JSをサイトに埋め込む
まずAdobe IDにログインし、Typekitのフォントリスト↑から使いたいフォントを選び、「フォントを使用」ボタンを押します。
上記のようにダイアログが表示されますので、「Web」タブの中にある「新しいキットを作成します」リンクをクリックします。
「キットを作成」画面にて、Webフォントを使いたいサイトのドメインを登録します。
ドメインを登録してキットが作成されると、Adobe Typekit Editorの画面が表示されます。
ここでは使いたいフォントのウェイトなどが選択可能です。選択項目を減らせば、その分ファイルサイズも軽くなります。
また、フォントを適用させたいCSSセレクタを指定することもできます。デフォルトでも「.hogehoge」というクラス名が設定されていますので、それをそのまま使ってもOKです。サイトのCSSを直接いじらずにWebフォントを適用できるのは便利ですね。
設定が終わったら忘れずに右下の「公開」ボタンを押してください。
右上の「埋め込みコード」をクリックすると、サイトに埋め込むJavaScriptコードが表示されますので、bodyタグの直前にコピー&ペーストしてください。
これでTypekitのWebフォントがサイト上で使えるようになりました。
なお、設定内容がサイトに反映されるまでには少しだけ時間がかかる場合があります。
4. 動作環境と注意点
日本語Webフォントの動作環境は下記になります。
PC環境:
- Chrome 31 以上
- Firefox 31 以上
- Internet Explorer 9 以上
- Opera 15 以上
- Safari 6 以上
スマートフォン環境:
- iOS 7.1 以上(Mobile Safari、Chrome for iPhone/iPod Touch/iPad)
- Android 4.1 以上(デフォルトブラウザー、Chrome、Firefox、Kindle Fire、Opera Mobile for Android)
- Windows Phone 8 以上(Internet Explorer)
- BlackBerry 10 以上(デフォルトブラウザー)
IE8で確認したところJSエラーが出ていましたので、条件分岐タグなどでIE8以下ではJSファイルを読み込まないようにするのが良いかもしれません。
5. 日本語Webフォント全14種
各タイトルと本文にWebフォントを適用していますので、レンダリングや表示速度など、実際のサイトでご利用になるときの参考になれば幸いです。
1)源ノ角ゴシック無料
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
2)りょうゴシック PlusN
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
3)りょう Display PlusN
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
4)りょう Text PlusN
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
5)平成角ゴシック StdN
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
6)平成角ゴシック Std無料
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
7)平成丸ゴシック Std無料
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
08)平成明朝 Std無料
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
09)平成明朝 StdN
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
10)かづらき SP2N
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。(※タイトルのみ適用)
11)小塚ゴシック Pr6N
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
12)小塚ゴシック Pro
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
13)小塚明朝 Pr6N
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
14)小塚明朝 Pro
美しい日本語ウェブフォント
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。
プレスマンでは他のWebフォントサービスも利用していますが、今回Typekitに日本語フォントが追加されたことで選択肢の幅が広がりました。本文に適用しても、MacはもちろんWindowsでの描画も思ったより綺麗だったのと、月間ページビュー数の上限に余裕があるところが嬉しいです。
Webフォントはレスポンシブウェブデザインとも相性が良いので、積極的に採用していきたいと思います。