まとめ
まとめを先に書いておきます。
<head> 内で
<link rel='stylesheet' id='libre-lora-css' href='https://fonts.googleapis.com/css...' ... /> ... (親テーマ指定のwebフォント用CSSの削除) ... <link rel='stylesheet' id='libre-2-style-css' href='...' ... />
の順になってほしいため、子テーマの functions.php では
add_action( 'wp_enqueue_scripts', 'libre_kid_fonts', 9 ); /* style.css より先に読み込む必要がある */
function libre_kid_fonts() {
wp_enqueue_style( 'libre-lora', libre_lora_url(), array(), null );
}
add_action( 'wp_enqueue_scripts', 'libre_dequeue_google_fonts', 11 ); /* 優先度を落とす */
function libre_dequeue_google_fonts() {
wp_dequeue_style( 'libre-2-fonts' );
}
のように、add_action('wp_enqueue_scripts') に優先度を付ける必要があります。
WordPress のテーマ Libre 2 と Google web フォント Lora
では、結論を先に書いた後でゆっくり経緯を書いてみます。
ふと WordPress のテーマを変えてみました。もう自分で作る気力もないので、公式ディレクトリで人気順に見ていって、シンプルな Libre が気に入りました。すぐ後に WordPress.com のほうで後継 Libre 2 を見つけ、「ダウンロードしてインストール型 WordPress で使用できます」とあったので早速そうすることにしました。
いくつか直したいところがあったので、子テーマで手を入れることにしました。変更点を備忘録的にここに書いておくと、
- フォント関連の変更。欧文フォントを Libre Baskerville からLora に変更した。
- 装飾に Dashicons を使うことにした。
- 記事の最初のメタ情報にカテゴリー・タグを表示することにした。記事の最後には表示しない。
- 本文の段落は1字下げ。段落間は小さくする。箇条書きの上下のマージンも小さく。
- 本文内の見出し(<h3>など)は上下にマージン。ただしその見出しが本文先頭なら上マージンなし。
このテーマは、やや長めの文章を見せるのに適するようにセリフ(serif)の書体 Libre Baskerville が指定してありました。そこで日本語で書かれるこのブログでも、セリフ(明朝体)にすることを考えます。ただ、よくあるヒラギノ明朝体や游明朝体の中に混ぜてみると Libre Baskerville は落ち着かない感じがして、同じく Google web フォント の Lora に変更することにしました。
wp_dequeue_style() の実行順序
親テーマの Libre 2 は、その functions.php で
function libre_2_scripts() {
...
wp_enqueue_style( 'libre-2-fonts', libre_2_fonts_url(), array(), null );
}
add_action( 'wp_enqueue_scripts', 'libre_2_scripts' );
と、webフォント Libre Baskerville 用の CSS を google から読み込むようになっています。子テーマでは、ここで enqueue しているものを dequeue すればいいのです。
が、子テーマの場合、そもそも functions.php の実行順は (1)子テーマの functions.php (2)親テーマの functions.php です。したがって、子テーマの functions.php に普通に dequeue を書いてもこれが先に実行され(つまりまだ enqueue されていないものを dequeue しようとする)、その後に親テーマで euqueue されることになります。
そこで、子テーマでは dequeue の実行の優先度を下げて(10より大きな数字にして)書いておかなければなりません。
wp_enqueue_style() の実行順序
子テーマでは、親テーマの libre_2_fonts_url() を真似して、別のwebフォントである Lora 用の CSS を指定する libre_lora_url() を書きます。
この CSS は Google Fonts から読み込まれますが、内容は
...
/* 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;
}
...
のような @font-face がいくつも並んでいるものです。子テーマの style.css では
body {
font-family: Lora,Georgia,Times, ... ;
}
のように、この定義を利用して使用フォントを指定します。
ところでこの 定義 @font-face と指定 font-family の順序ですが、ブラウザー Chromium の場合 (Debian の Chromium で確認しました。おそらくどの OS でもブラウザー Chrome でも同じだろうと思います)、前もって @font-face がないと font-family での指定時にそれが存在しないものと扱われるようです。Firefox ではその順番は関係ないようでしたが。
そこで、子テーマの style.css より前にこの CSS が読み込まれるように、wp_enqueue_style() を呼ぶ add_action('wp_enqueue_scripts') の優先度を 9 にします。
[…] このブログでの欧文フォントに Google の web フォント Lora を使うことにしました。デザインがとても気に入っています。 […]