WebTypeFont

Hi, I detected your main language is not Japanese. I have an english version of about me, so please try it!

この投稿は3年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2013 年 12 月 13 日 1,335日前)
4,036文字 (読了時間10分)

SPONSORED LINK

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

WebフォントサービスのFontPlus
WebフォントサービスのFontPlus

FontPlusに乗り換えた理由

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

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

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

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

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

TypeSquareをSafariで表示すると「美しい」がリュウミンに
TypeSquareをSafariで表示すると「美しい」がリュウミンに
自作のUIWebViewで表示すると「美しい」がヒラギノゴシックに!
自作のUIWebViewで表示すると「美しい」が中華ゴシックに!

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

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

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

FontPlusでは自作UIWebViewでもちゃんとフォンが適用済み
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. 印刷業界で有名なフォント使いたい

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

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

タイポグラフィ・タイプフェイスの現在―5人の書体設計家と3人のタイポグラファーの思い (女子美術大学講義録 書物を構成するもの)

タイポグラフィ・タイプフェイスの現在―5人の書体設計家と3人のタイポグラファーの思い (女子美術大学講義録 書物を構成するもの) [書籍]

クリエーター女子美術大学, 女子美術大=, 女子美大=

出版社女子美術大学

出版日2007 年 6 月 1 日

商品カテゴリー大型本

ページ数198

ISBN4888888337

女子美の講義録なんですが、歴史的な話からAdobeの小塚明朝作った人の話まであって、面白いです。

Supported by amazon Product Advertising API

2. WordPressテーマ出したら?

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

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

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

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

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

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

 

SPONSORED LINK

この記事について

この記事はが2013 年 12 月 13 日にデザインの記事として公開しました。

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

  • Pingback: Webフォントのモリサワ TypeSquareに申し込んでシャレオツ和欧混植 | 高橋文樹.com()

  • AC

    今は使えてますね

    • ACさん

      「今は(このサイトでWebフォントが)使えてますね」という意味ならイエスです。FontPlusに乗り換えたので。
      「今は(モリサワTypeSquareのWebフォントがUIWebViewで)使えてますね」という意味ならノーです。

      ためしにWordPressアプリ(このブログを書くために使用しているiPhoneアプリ)でTypeSquareを表示してみましたが、Webフォントは適用されず、「美しい」という文字がゴシックのままです。添付画像をご覧下さい。

      • AC

        先日の展示会で確認しましたが、展示会の時点では修正したと聞きました。

        • 時系列がよくわかりませんが、先日というのは僕が確認した時点(この前のコメント日時)より前なんでしょうか。

          それによってモリサワが嘘をついているのか、僕が間違っているのかのいずれかになります。

          いずれにせよ、僕はモリサワに雇われているデバッガーでも広報でもないので、モリサワから個別に連絡を貰えば追記もしますが、わざわざ適用されたんだかされていないんだかわからないパッチの存在を確認するためにUIWebViewでTypeSquareを開いて定期的に確認するということはしません。

          もしTypeSquareが動いているかどうか確認したい場合はご自身でiOSを使って開いてみることをオススメします。