デザイン

WebフォントをTypeSquareからFontPlusに変えることになった

高橋文樹

2013 年 12 月 13 日
最終更新： 2015 年 2 月 9 日
読了4分（3,138文字）
css フォント

この投稿は 10年半前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

さて、先日WebフォントのモリサワTypeSquareを導入したよーという記事を書きましたが、あっという間にFontPlusに変更しました。今回はその顛末について。

WebフォントサービスのFontPlus

FontPlusに乗り換えた理由

さて、無事TypeSquareを導入して、ブログも書いて、こりゃしばらく筆が載りそうだわいと思っていたところ、衝撃の事実が発覚。なんと、iOSのtwitterやFacebookといったアプリでこのブログを表示すると、Webフォントが適用されていないじゃあーりませんか！　Safariでは表示されているのに！

2015年2月10日現在は表示されるようになったようです。

とはいえ、もしかしたら自分の設定が悪かったのかもしれません。他のサイトできちんと表示されているなら、自分がなんかおかしいんだろうということで、このための環境を整えてみます。

おもむろにXcodeを開く
UIWebViewだけを表示するアプリを作る（これは実は簡単＞参考リンク）
TypeSquareの導入事例ページを表示してみる

するとなんということでしょう！　フォントがデバイスフォントのままです！

TypeSquareをSafariで表示すると「美しい」がリュウミンに

自作のUIWebViewで表示すると「美しい」が中華ゴシックに！

一応説明しておくと、UIWebViewというのは、iOSアプリを作るときに内部ブラウザとして利用できるクラスです。TwitterとかFacebookアプリを利用しているとSafariを起動しないで、アプリ内でブラウザを開きますよね。あれです。

UIWebViewとSafariは微妙に挙動が異なっていて、端的に言うと、UIWebView＝しょぼいSafariです。となると、もしやそのしょぼさゆえWebフォントに対応してなかったりするの？

そこで、同じくWebフォントサービスであるFontPlusのサイトを表示してみると、ちゃんとフォントが適用されています。ムムム……

FontPlusでは自作UIWebViewでもちゃんとフォンが適用済み

僕はiPhoneユーザーですが、実はSafariってそんなに使わなかったりします。メールとかメッセージとか、Apple謹製アプリではSafariが開かれることが多いですが、TwitterとかFacebookでは一々Safariを開きません。UIWebViewでWebフォントが適用されないとなると、実際のところ「iPhoneでは使えない」とほぼ同義になります。

ここで僕がモンスタークレーマーならモリサワに電凸するところですが、まだ一円も払っていないので、「UIWebViewで適用されないですよ」と問い合わせて終了。さっそくFontPlusに乗り換えることにしました。

FontPlusの乗り換え方

さて、前回は「うまく実装できなかった」とか書きましたが、あれは単に僕が登録するドメインを間違えていただけでした。普通に使えました。もちろん、Androidは怖くて見ていません。

FontPlusの特徴

こんな感じです。

月額は1,050円なので、TypeSquareより安いものの、初期費用が10,500円……
PVで支払う感じなので、複数のサイトを登録することは可能。スマートライセンスなら幾らでもサイトを追加できる
フォントの数はTypeSquareより多い。また、モリサワのフォントも幾つか登録されている（このあいだ採用したA1明朝とか明石とかはなかった……）

全体的な印象としてはとてもいいと思います。特に、僕のすきな白舟書体があるのは嬉しいですね。侍とか。

我が人生に一片の悔い無し

こうしたフォントはプロのデザイナーからすると眉をひそめる類いのものだとは思うのですが、僕みたいな素人からすると、「色んな字が使えて楽しー♪」ってなりますね。

今回採用した書体

TypeSquareのときに使っていた書体がなかったので、こんな感じにしました。

$title-font: "Palatino Linotype", "Book Antiqua3", Palatino, "KleePro-M", "游明朝体 ミディアム", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "IPA P明朝", "細明朝体", "メイリオ", Meiryo, serif;
$body-font: Garamond, "Baskerville", "Times New Roman", Times, "MatissePro-L", "游明朝体 ミディアム", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "IPA P明朝", "細明朝体","MS P明朝" ,"ヒラギノ明朝体3",serif;

マティスは端正なたたずまいで割と好きなのですが、本文用として適当かどうかはよく知りません。タイトルはクレーにしてみましたが、これは変えるかも。一度本文を筑紫オールドにしてみましたが、なんか合わなかったんでやめました。游明朝体はOS X Mavericksから入るようになった書体ですね。

欧文書体については、OSに元々入っているもので沢山の選択肢があるので、それを使うようにしています。ちなみにですが、ここら辺のサイトにOSごとにインストール済みのフォントがまとまっているので、参考にしてみてください。

日本語Webフォントの今後

今回こうやってTypeSquareをやめたというエントリーを書いたわけですが、特にモリサワを恨んでいるかというとそういうことはなく、普通にUIWebViewでも表示できればまったく問題ないと思います。個人的には同人誌を作るときとかにモリサワのフォントを使っているので、今後も応援したいところです。

選択肢は多い方がいいと思いますし、積極的に利用していくつもりです。今後はこんな風になったらいいんじゃないかと思いました。

1. 印刷業界で有名なフォント使いたい

京極夏彦さんとかは文字組に超うるさいというのは有名な話ですが、昔から組版にこだわる作家というのは多くいました。うろ覚えですが、岩波文庫御用達の精興社とかは美しい印刷が有名で、作家の中には精興社ご指名の方もいたそうです。

https://twitter.com/satou__sio/status/292647640624160770

で、こうした活版時代の書体はデジタルになっていないものが多いらしいです。有名どころでは最近復刻されてモリサワパスポートで使えるようになった秀英体とかがありますね。こういうのがWebフォントでも使えるようになると嬉しいです。

[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...)

2. WordPressテーマ出したら？

これは大きなお世話かもしれませんが、WordPressテーマとか、そういうテンプレート販売と組み合せるといいビジネスになるかもしれません。

最近のWordPressテーマはどんどんシンプルな方向に向かっているように思えますが、一見シンプルでありながら、タイポグラフィに凝ったものが増えています。PhotoBlogging + Typographyというか。ところが、日本語でWebデザインをやっていると、「最後はメイリオ」みたいな妥協になりがち。結局全部ゴシック体じゃねーか、みたいな。

WordPress.comの日本人作公式テーマryu。シャレオツですが、日本語書くと印象がグレードダウン。

FontPlusやTypeSquareはスクリプトを埋め込むサービスなので、ただブログ書きたいだけの人にはハードル高いですね。あと、そもそも「書体を変えると印象が変わる」という発想が専門家のものなので、ある程度セットにしてあげた方がわかりやすいですね。

どこでどうやってお金取るのかとか考え出すと話がややこしくなりますが、ホスティングサービスぐらいまで一緒にしないとダメかもしれません。シャレオツなブログを書くのに、月500円から！　テーマは1つ5,000円！　プレミアムプランは月2,000円だけど500種類のテーマから選び放題！　とかですかね。よくしらんけど。

というわけで、紆余曲折を経てWebフォント導入を済ませたわけですが、700近い書体があるので、しばらく楽しめそうです。終わり。