オフラインiPadでGoogle Fontsを使う(未解決)
Geronimo Labelの新しいサイトも、多国語展開で制作中。翻訳した部分を、機内清掃の休憩時間に、中国やコロンビアや韓国から来ている同僚に見てもらいたいと考えた。しかし、羽田の控え室はWi-Fiが飛んでない。
なので、iPadにサイトを丸ごとダウンロードして、（外部リンク以外は）すべて、完全オフラインの状態で動作するようにしたい。
Vue.jsやjQueryなどライブラリーの類は、DLしたファイルに普通にリンクを張れば良いとして、Google Fontをオフラインで使うのはどうすればいいのか。
簡単な事のはずなのだが、chromeのキャッシュの強制削除が効かないのか、Wi-Fi接続を切ってブラウザをリロードしても、適用されるべきフォントが適用されていなかったり、コメントアウトしたはずのフォントが適用されてしまったりしていて、けっこう混乱した。
結果的には、まだ解決してないんやけど、ちょっと手間取ったので、途中経過をメモ。
目次
SkyFontsでダウンロード
Google Fontsのページで、使いたいフォントを選ぶ
Families selectedのポップアップ > download > Use SkyFonts > Browse Google Fonts をクリック
例えば Kanit を選ぶと、太字や斜体など全部が表示される。
どれかを選んで skyfonts をクリック
「ファミリー全体を追加する」 > 追加
これで、 ~/Library/Fonts/skyfonts-google/ にダウンロードされる。
ls -la ~/Library/Fonts/skyfonts-google/
で確認すると、例えば Kanit の全ファミリーが入っている
サイトの index.html と同じ階層に fonts フォルダを作成し、 ~/Library/Fonts/skyfonts-google/ から必要なフォントをコピー
htmlファイルの<head>内で、使うフォントを呼び出し、cssで適用箇所に記述する。
<link rel="stylesheet" href="fonts/Special%20Elite%20regular.ttf"> <link rel="stylesheet" href="fonts/Calistoga%20regular.ttf"> font-family: 'Special Elite', cursive; font-family: 'Calistoga', cursive;
今回は Special Elite という装飾体系のフォントただ一つを使うだけなので、シンプルに、
<link rel="stylesheet" href="fonts/Special%20Elite%20regular.ttf"> font-family: 'Special Elite', cursive;
作業中のmac book air で、wi-fiを切って動作確認した。Google FontsのSpecial Eliteは正常に表示されている。
iPad側のファイルマネージャー
offline用のサイト一式をDropbox経由でiPadにダウンロードするのだが、iPad側のファイルマネージャーには、Documents by Readdle と File Explorer pro を入れている。
どちらも語学学習用に、オフラインのサイトを見るのに使って不具合はなかったのだが、Documents by Readdle でGLサイトを見た時、トップのナビゲーションバーが全く固定されず、今回は使い物にならない。
なので、Dropbox経由でFile Explorer pro を使ってDLした。そして、iPadのwi-fiを切って、ファイルを開いたが…
Google Fontsの Special Eliteがまったく反映されていない。なんでだ？？
固定したナビゲーションは、スクロールしても固定されたままなので、翻訳部分のネイティブチェック用の閲覧には、これで不都合はないけれども、どうやったらiPadのオフラインで、Google Fontsが反映できるんだろう？
追記
CSS の @font-face を使う方法は、時間がある時に勉強したい。