KDPでfont-familyが効かなくなる不具合・その後

先日、「KDPでfont-familyが効かなくなる不具合」という記事を書きました。
その後、試行錯誤した結果、問題を回避する方法が分かりました。

1.font-familyプロパティが効かなくなる条件

以下のどちらかの状況になっていると、font-familyプロパティが効かなくなります。

1-1.同一要素に複数のfont-familyを指定する

まず、クラスセレクタ等を使って同一要素に複数のfont-familyを指定すると、他の要素のfont-familyの指定も効かなくなります。
例えば、以下のスタイルシートを指定すると、font-familyの指定が効かなくなります。

p.a {
  font-family : ○○○;
}
p.b {
  font-family : □□□;
}

1-2.HTML内にfont-familyの指定がないブロック系要素が存在する

HTML内にブロック系の要素(pやh1~h6など)がある一方で、スタイルシート内でそれらの要素に対するfont-familyを指定していないと、font-familyの指定が効かなくなります。

例えば、HTML内でh3要素を使っているとします。
この場合、スタイルシートでh3要素にfont-familyプロパティを指定していないと、他の要素のfont-familyの指定も効かなくなります。

なお、インライン系要素(aやspanなど)については、スタイルシートでfont-familyプロパティを指定していなくても問題ないようです。

2.回避方法

上記のことから、font-familyの指定が反映されるようにするには、以下の2点を守るようにします。

  • 1.font-familyプロパティは、要素セレクタに対して指定する
  • 2.HTMLに存在する個々のブロック系要素に対し、スタイルシートでfont-familyプロパティを指定する

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください