モチベーション
Electronで作るアプリでも、Google FontのようなWebフォントが使いたい。この場合、どうやって指定するのが良いのか？例えば、指定の仕方として次の候補が考えられる
- 方法１：Web fontをダウンロードしてアプリに同梱する。使用するときはＣＳＳの
@font-faceでsrc: url('./font/FONTNAME);などの様に同梱したファイルを相対パスで指定。 - 方法2：レンダラープロセスのHTMLのheadにて
<link href="https://fonts.googleapis.com/css2?family=FONTNAME&display=swap" rel="stylesheet">で読み込む - 方法3：CSSの先頭で、
@import url('https://fonts.googleapis.com/css2?family=FONTNAME');で読み込む
この中で、Electronアプリとしてベターなものはどれだろう。
Electronアプリに求めるもの
上の「ベター」とは、そもそもElectronでアプリ化する時点で、次ことを要求しているのではないだろうか
- ローカルＰＣでの起動を目的としている。
- オフラインでの使用も視野に入れている
オフラインを想定した時、最初は方法1（ダウンロードして同梱）しか解が無いと思っていた。ただ、フォントの同梱は、次の問題もある
- フォントの再配布に関するライセンスの問題（Ｇｏｏｇｌｅ ｆｏｎｔは再配布ＯＫ）
- アプリのパッケージサイズが大きくなる
- アプリの見た目（テーマ）をＣＳＳでカスタマイズやユーザー定義できるようにしたい場合、未同梱のＷｅｂフォントを使うにはどうするか
ただでさえファイルサイズが大きいと揶揄されるＥｌｅｃｔｒｏｎアプリがさらに大きくなるのは困る人も多そう。
また、リッチテキストエディタやビューアなどを作っている時は、三番目のテーマのＣＳＳカスタマイズなどもやりたいでしょう（少なくとも私の開発しているエディタではやってみたい）。すると、フォントの同梱では必ずしも解決しない。さらに、このテーマのカスタマイズに関しては、方法2(linkタグで指定)を行うのは、カスタマイズに合わせてDOMを操作しないといけないので、あまり好ましくない。
となると、消去法で方法3が残る。
ElectronアプリでもWebフォントのキャッシュが効く？！
方法3（CSS中で@import）でWebフォントを指定する場合、初回起動時にオフラインだと確かにフォントが読み込めず、代替フォントでの表示になってしまいます。ただ、（初回に限らず）オンラインで一度でもWebフォントを読み込めた場合は、Electronアプリでもフォントのキャッシュが残るようで、以後の起動ではオフラインでもWebフォントが使えるようです。そして、OSの再起動をしてもこのキャッシュが有効のまま生きています。
とりあえず動作確認した環境
- Windows10 (1909）
- Mac OS 10.14.6
ただし、フォントをキャッシュしている仕組みは理解していません。OSのキャッシュなのか、Chromiumのキャッシュなのか、Chromeのキャッシュと共通なのか、アプリごとに独立したキャッシュになっているのか。OS再起動ではどうなるのか。詳しい人がいたら教えてほしいです。
結局
この時代、完全にオフラインではなく、オンラインの状態での起動もあり得る、と割り切れるなら、Electronアプリにおいて@importでWebフォントを読み込ませてしまっても大丈夫かもしれません。
皆さんがどうしているか、是非コメント欄にでも情報共有いただけると勉強になります。