BiB/iのEPUBリーダでWEBフォントを使いたくて挫折した話

どうも片倉です。
タイトルの通り、BiB/iというEPUBリーダサービスでWEBフォントが使えたらなーと思って色々試してみたのですが、挫折しました。
できんことはない。
だがGoogle日本語フォント、テメーはまだまだだ(結論です)。

以下に経緯を記しておきます。
興味がある方はどうぞ。

経緯

遊星ジャーナルの公式サイトではBiB/iを採用し、EPUBを埋め込むことで試し読みができるようにしています。
planets-journal.info
ですが、下図のように、GoogleChromeだとすげー見づらいんですよね。
f:id:KtkrAo1:20170613070025p:plain

クソかよ。
というわけで、せっかくGoogle日本語フォントが使えるようになったことですし、いっちょ「さわらび明朝」を引っ張ってきて表示したろか、という魂胆でスタートしました。

googlefonts.github.io

やったこと

CSSファイルをいじくりました。

一太郎2017でEPUBを作ると

  • styleholizontal.css
  • stylevertical.css

の二種類のCSSが生成されます。

このCSSからフォントを指定してやればいいよ、とBiB/iの作者さんからコッソリ教えて頂いたので、指定することにしました。
ただし「サーバにフォントファイルは置かない(外部から引っ張ってくる)」ことを目標にしました。
(だってライセンスとか面倒くさいし)

というわけでまず、上記二枚のCSSファイル冒頭にフォントの在処を @import 構文で指定。

@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);


次に font-family が指定されている部分のうち、 inhelit が指定されていない部分を指定。
(inhelit は親要素のスタイルを引き継ぐの意なので書く必要ナシと判断)

font-family: 'Sawarabi Mincho', serif;


さて、これでいけるやろ、と思ったんですが念のためEPUB化してEPUBチェッカーにかけたところ

エラーを吐きました

エラーの内容は

ERROR (RSC-007) at "pj01sample.epub/OEBPS/stylevertical.css" (line 2, col 9):
   Referenced resource could not be found in the EPUB.

ERROR (RSC-007) at "pj01sample.epub/OEBPS/stylehorizontal.css" (line 2, col 9):
   Referenced resource could not be found in the EPUB.


@import url(ファイルの場所)
で発生していることを示しています。
なんでや。CSS3の書き方に沿っているはずなのに。


気まぐれに

@import src(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

と書いてみたところ、こちらは何故かチェッカーを通る
とはいえ明らかにこの構文は変ですし、オンライン上にブツを置くことを考えると、このエラーは無視してCSS3の書き方に準じた

@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);

で押し通ることにしました。


結果が以下となります。
f:id:KtkrAo1:20170613073058p:plain

なんでやねん。

いや確かに読み込めてる。読み込めてるんだけど。
レイアウトぐっちゃぐちゃやん……

と思ったんですが、そもそもさわらび明朝が縦書きに適していない可能性もあるな、と考えて、定番のはんなり明朝を試してみることにしました。
書き換える部分はさわらび明朝と指定している部分をはんなり明朝に置き換えるだけですので割愛。
結果だけお見せします。

f:id:KtkrAo1:20170613074450p:plain

なるほど

まだ時期尚早だったんですかね……


結局、僕が出した結論はこうでした。

font-family:;

2017年6月13日10時40分追記:これ、EPUBチェッカーに突っこんだら怒られたので以下のように修正しました。

font-family: sans-serif;

要するにブラウザ側に任せる。

そもそもserifを指定してるのが良くないんですよ。
誰だよ指定したの(一太郎2017だよ)。
WEBだとゴシックが読みやすいですね。


結果は以下となります。ご査収ください。
f:id:KtkrAo1:20170613075354p:plain

ハイ読みやすい!最高!


以上、バッドプラクティスでした!

©青聿書房 Aofude Shobo