アプリやWeb周りのフォント事情について覚書（超初心者向け）

webエンジニア見習いで、最近アプリのWebView（アプリ内でwebで作った画面を表示する）も作るようになりました。

そこで、フォントをデザイナーさんが指定してくれたもので統一するんだよな〜と思って、調べていたら、意外なことがわかったのでメモ。

まず、webではwebフォントなるものが色々出てきている現状だと思いますが、Googleのwebフォントなんかいい感じですよね。

やっぱりwebフォントというと、Googleの日本語フォント？？

と思っていたのですが、Googleのwebフォント、日本語の文字は10Mb〜20MBくらい容量があり、パフォーマンスを重視するサイトでは「こんなの使えるかよ！」という段階らしい。

フォントは、URLだけで毎回ネットワークからダウンロードしてくるタイプと、
フォントファイル（ttfなど）をダウンロードして、webアプリの所定の場所に配置してCSSから読み込むタイプとあるが、
Google Fontの日本語のやつは上記の通り重すぎるため、使う文字だけ取り出して別でttfファイルなどを作ることで、少しでも容量を減らすというテクニックを使ったりするらしい。
Google Fontの日本語のものでは、Noto Sans CJK というのが有名だが、このCJKというのはChina, Japan, Koreaの字をまとめているものだから、少なくともJapanのものだけにしぼると少しは容量が減るという。

おそるべしパフォーマンスチューニングの世界・・・

ややこしい種類

Google FontのNoto Sans CJK JPというのと、Noto Sans Japaneseというのがあったので何が違うの？　と思ったんですが、
これはあんまし容量は変わらないが、JPの方が少し使える文字が多いとのこと。
なので、CJK JPの方を選んだようが良いようですね。

使い方は？

Google Fontに限らずのはなしですが、CSSに@font-faceというのを追加して、どこのフォントファイル/URLを参照しなさーい、というのを描いてあげます。
あとは、cssで普通にfont-familyで指定するだけ。
この時、@font-faceには、url（フォントファイルをおいた場所）と、フォントファイルのタイプをかいてあげます。
下記がシンプルに描いてくれていたのでメモ。
Google Fonts using @fontface in your .css (Example)

ちなみに、タイプというのは、.ttfとかのことで、ttfは、true type fontの略らしい。

有料フォントの大体の価格

ただ有料のフォントって、やっぱ高いですよね。会社で、ちゃんとデザイン性を重視したサイト&アプリを持っているところとかなら投資するかもですが、
個人ではやっぱ高いなーって感じです。
ヒラギノ（macでは標準フォント）の、webフォントやアプリで使えるフォントを配信しているサイトを見ると、
TypSquareでは、１万PV/月までは無料。それを越えると25万PVまで2160円/月。
FONTPLUSでは、10万PVまでなら有効期限1ヶ月で1080円（ほとんど初月無料、くらいの話ですね）。
あとは月間PVが10万までなら、一月1000円くらいってとこですね。
上記は、一番安い価格帯のやつで、そのあとPV数が増えるごとに価格も上がっていくようです。
（2018年4月現在。それぞれのサイトを参照した）

アプリ（iOS、android）の標準フォント

iOSアプリでは、日本語の標準は、サンセリフ・フォントの場合はヒラギノ角ゴシック、セリフ・フォントの場合はヒラギノ明朝（Appleのページで確認したが、そのURLを消してしまった・・・見つけたらまた貼ります、2018年4月現在）
androidは、６.０からはNoto Sans CJKらしい。こちらも元のページがなかなか見つからない。見つけ次第貼ります。

アプリでの有料フォント使用について

ヒラギノなどの有料フォントでは、Webフォントをアプリでも使えるようにして、いろんなデバイスで同じ文字を使えるようになったみたいです。（iOSは標準装備ですね、androidでも一応使えるみたい）
でも、デザインをそこまで突き詰めるアプリを作っている会社も少ないのか、
とあるiOSエンジニア曰く、「基本は標準フォントしか使わない」とのこと。
標準フォントではない、ヒラギノなどの有料フォントを明示的に設定することで、View周りの数値計算（幅など）が狂う場合もあり、
そのバグはずっと前からあるけどAppleさん直すつもりもなさそうなので、今後もずっと直らないだろうと予測している人もいました。
ただ、これは1人の意見と、1ブログの意見なので、実際のところはわかりません。
（デザイン重視だったら、フォント買う世界も全然あると思うんですよね〜。デザイナーからすればデザインにフォントって付き物どころか、結構主役級だったりするようなので）