Webフォントのモリサワ TypeSquareに申し込んでシャレオツ和欧混植

特に誰からも聞かれなかったので自分から書きますが、先日このサイトのデザインをリニューアルしました。で、ついでといってはなんですが、以前から興味のあった日本語Webフォントを導入しました。

今回採用したのは、モリサワのTypeSquareというサービス。PVに応じて課金されるサービスですが、来年の1/31までは無料です。もう一つ有名どころとしてはソフトバンク系のFontPlusというのがあって、違いは以下の通りです。

	TypeSquare	FontPlus
費用（月額）	2,100円〜	1,050円〜
フォント数	約330	約700

おめあてのフォント（オールド明朝系）はFontPlusにしかなかったのですが、なぜか実装が上手くいかなかったのでモリサワにしました。大変後ろ向きな選択であります。

使ってみた感想

Webフォントをアイコン以外で使ったのははじめてだったんですが、なかなかいいですね。自分のブログに対するナルシスティックな思いをかき立ててくれます。

小説を書き始めた頃、自分の書いたものを印刷すると、それだけで高級ななにかができあがったような気分になったものですが、その頃の気持ちを思い出しました。以下、感想です。

1. 速度面

日本語のまともなフォントは字数が多い（15,000字〜）ので、5MBぐらいあります。これを読み込ませるのは無茶だろうということで、どのWebフォントサービスも次のような流れでフォントの読み込みを処理します。

1. まず、JSを読み込み。必要なフォントの種類をCSS解析で決定。
2. 続いて、対象となる文字を重複なくリスト化
3. サーバに問い合わせて、必要なグリフだけが含まれたフォントをダウンロード

この速度自体はそんなに遅いとは感じませんでした。今後、向上していくことでしょう。

ただし、Webフォントにつきものの現象なのですが、フォントがダウンロードされるまでの数秒間、デバイスフォントがそのまま表示されます。あと、適用される瞬間に僅かな間ですが文字が消えます。

僕みたいにだらしない人間は「別にいいじゃんそんぐらい、カッケーだろ？」となりますが、クリエイティブにこだわる方は許せないと思いますので、フォント読み込み完了までローディング画面を出したりフェードインエフェクト入れたりすることになるでしょう。

ちなみに、TypeSquare自体にフォント読み込み完了を示すイベントのようなものがあるのかどうかは調べてないのでわかりません。

2. ブラウザ対応

まず、Windowsだと汚いですね。特にXPだと字がかすれちゃってよく読めません。まあ、これはOSの問題なんで、しょうがないんじゃないでしょうか。昔見た『Helvetica』というドキュメンタリーでもタイプデザイナーがビル・ゲイツをめちゃくちゃDISってましたからね。

[429] [429] Client error: `POST https://webservices.amazon.co.jp/paapi5/getitems` resulted in a `429 Too Many Requests` response: {"__type":"com.amazon.paapi5#TooManyRequestsException","Errors":[{"Code":"TooManyRequests","Message":"The request was de (truncated...)

このサイトの場合は、それ以前にIE8で盛大に崩れているので、今後暇ができたら対応します。

iOSはたぶん大丈夫です。iOS7しか見てないけど。Androidは怖くて見てません。

自分のブログだったらいいですが、お客さんのサイトとかだったらどうですかねー。う〜ん。勧めるかどうか微妙なところです。「IE8でも綺麗に見せられるようにしてくれ！」とか言われたら超めんどくさそう。

3. 技術的な制限

存在するフォントを解析してダウンロードするという仕様上、コンテンツがボンボコ追加されるようなサイトには向いてないですね。

たとえば、FacebookのタイムラインみたいなものはNGです。フォントをダウンロードした後に文字が追加されますから。やってないんでわかりませんが。

FontPlusにはそこら辺をどうにかするAPIもあるみたいなんですが、タイムライン作るだけでもめんどくさいのに、フォントのケアまでしろとか言われた日には「誰がやんの？」ってなりますよね。UIデザイナー？　そんなスペシャルな人材はうちにはおらんぞ！ とかなるんじゃないですか。

こんなことできるよ！

さて、ネガティブなことを書いてしまったので、嬉しかった点など。

憧れの和欧混植

和欧混植というのは、英語のフォントと日本語のフォントを混ぜて使うことです（多分）。InDesignとかだとわりとよく使われてるはずです。

このサイトではこんな設定にしてあります。

/* SASS使用 */
$body-font: 'Garamond', 'A1 Mincho', 'ヒラギノ明朝 ProN W3', 'IPA P明朝', serif;
$title-font: Georgia, 'Akashi', sans-serif;

ちょっと前のSafariとかは一つ目のフォント以外全部無視してたような気がするのですが、いまではしっかり和欧混植できてます。

まあ、この組み合わせがそんなにいいのかというと、ちょっとモニョるところはありますが、僕がいいっていってるんだからいいじゃないですか。なんなんですか。

CSS3でぼかしとか

リニューアル時に実装して、まだ使っていないこのサイトの機能に「ネタバレ」というものがあります。要するに、こんな感じですね。ポートピア殺人事件の犯人を書きたいときとかに使えます。

ポートピア殺人事件というのはファミコン初期のアドベンチャーゲームなのですが、真犯人はなんと助手のヤスです。ついでに書いてしまいますが、アガサ・クリスティーの『アクロイド殺し』の真犯人はなんと語り手です。

この表示はCSS3のblurフィルターを使ってます。

TinyMCEを調教済みのこのブログでは、管理画面で段落を選んでポチッとボタンを押すだけなので、大変お手軽。こういうのもWebフォントだからこそできる芸当ですね。

@import 'compass/css3/filter';
.netabare{
    position: relative;
    @include filter(blur(7px));
}

2008年頃はFlashのTextLayoutFrameworkと組み合せて一生懸命フォントを組み込んだりしてましたが、いまとなってはこんなにお手軽。月日が経つのは本当に早いですね。

というわけで、TypeSquare使ってみた雑感でした。たぶん、無料期間が終了しても使い続けると思います。このブログ、大してPVがないのにCloudFlareも有料版、有料SSLも導入済みなど、かなり富豪ブログなので、がんばってPVを延ばしたい所存であります。