まとめ
まとめを先に書いておきます。
特定の文字コードのみ(ここでは「除算記号」(U+F7))別のフォントを使いたい場合、まずそれについて定義します。
@font-face {
font-family: 'division sign';
src: local('Georgia'),local('Times'),local('Times New Roman'),local('Serif');
unicode-range: U+F7;
}
その後に全体で使うフォントを定義します。ここでは Google Fonts から読み込む CSS で
...
/* latin */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: local('Lora Regular'), local('Lora-Regular'), url(https://fonts.gstatic.com/s/lora/v10/4vqKRIwnQQGUQQh-PnvdMA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
...
などです。それらの後で、実際に使用するフォントを指定します。
body {
font-family: "division sign",Lora,Georgia,Times, ... ;
}
この定義と指定の順番を入れ替えてはなりません。
web フォント Lora のうち「除算記号」だけ使わない
結論を先に書いた後でゆっくり経緯を書きます。
このブログでの欧文フォントに Google の web フォント Lora を使うことにしました。デザインがとても気に入っています。
ところでこの Lora で「除算記号」は、真ん中の水平線がなく、コロン「:」にそっくりのデザインになっています。除算記号としてこの形のものを使う地域がある、ということを聞いたことがあります。
| Lora の除算記号 | ÷ |
|---|---|
| Georgia の除算記号 | ÷ |
その違いがうまく表示されているでしょうか。
通常の文章なら除算記号などめったに出てくるものでもなく、たいした問題ではないでしょう。ところが、このブログ「半月記」での一番人気の記事は
なのです。ここで除算記号が、日本でおなじみの形ではなく、すべて「:」そっくりになっていたら、読者は訳がわからなくなってしまいかねません。これらの記事の中の主張のひとつが「除算記号などごく限られた領域でしか使われないのだ」なのですが、その内容を書くためには除算記号を使わなければならず、そのデザインにまでこだわらなければならないとは、なんと皮肉なことでしょう。
@font-face の unicode-range
全体的には Lora をたいへん気に入っているので使い続け、「除算記号」のみ別のフォントで表示するようにしてみます。
CSS の @font-face には unicode-range という記述子がありますので、これを使います。このリンク先の例にあるのとほぼ同じように
@font-face {
font-family: 'division sign';
src: local('Georgia'),local('Times'),local('Times New Roman'),local('Serif');
unicode-range: U+F7;
}
のように書きます。文字コードU+F7(つまり「除算記号 division sign」)の場合のみ、Lora ではなく、Georgia, Times, “Times New Roman”, Serif のどれかを使うようになります。
定義の順序
さて、そもそも web フォント Lora を使うためには、CSS に定義 @font-face があるはずです。ここでは外部 CSS として Google Fonts より読み込んでいます。
これらの定義があれば
body {
font-family: "division sign",Lora,Georgia,Times, ... ;
}
のように使用フォントを指定して、意図通りになるはずでした。しかし実は、それらの記述の順序が大事でした。まず局所的なフォント定義(‘division sign’)が最初、それから全体のフォント定義(Lora)、最後にフォント指定、の順番でなければなりません。
WordPress での実践
ここでは WordPress の子テーマを使っています。子テーマの style.css のはじめのほうに局所的なフォント定義(‘division sign’)を書いても、それより前に外部 CSS の読み込めば、正しい順番になりません。もし 子テーマの style.css より後に外部 CSS 読み込みをもってきても、やはり正しい順番にはなりません。
そこで局所的なフォント定義を分離して先に読み込むようにします。この部分はたいした量でもなく、あとで書き換えることもまずないので別ファイルにせず、functions.php に直接書いて読み込ませることにしました。そして優先度を上げ(10より小さく)ます。
add_action( 'wp_head', 'division_sign_font', 7 ); /* 8 だと遅すぎる */
function division_sign_font() {
?>
<style type='text/css'>
@font-face {
font-family: 'division sign';
src: local('Georgia'),local('Times'),local('Times New Roman'),local('Serif');
unicode-range: U+F7;
}
</style>
あとは、前の記事に書いたように、外部 CSS の読み込みと子テーマの style.css の読み込みの順番が正しくなるように優先度を付けます。
