Google FontsのWebフォントをWordPressのブログに使用する際、linkタグを用いるべきなのか、@importでも構わないのか？
これまでの長年の疑問がようやく解けた。
なんのことはない。
その答えは、Google Fontsのサイトにあったのだ。
linkタグの使用が賢明
Any font that’s used in a website’s design that isn’t installed by default on the end user’s device—a counterpart to a “system font.
情報源: Web font – Fonts Knowledge – Google Fonts
「多くの場合、linkタグを使用する方が賢明でしょう。
フォントを事前に読み込むことができるため、サイトをより速く確実に読み込むことができます。」
ビデオでは、そう明言している。
わかってる人には何を今さらと言われるかもしれないが、永遠の素人の僕には初耳のこと。
これまで僕は、本当に何年も、@importで追加CSSのみに記載する方法でやって来た。
その方が簡単だったし、これまで困ったこともなかった。
しかし、聞き分けの良さと変わり身の早さは僕の持ち味。
早速、このブログをGoogle Fontsおすすめの方法で修正することにした。
WordPressで使う方法
1.フォントを選択する
使用しているのは、M PLUS 2。
Googleの日本語Webフォントの新顔のバリアブルフォントだ。
少し前に、@importで追加CSSのみに記載する方法で、このフォントに変更したばかり。
2.子テーマのheader.phpにコードをペースト
WordPressの外観＞テーマファイルエディターで使用するテーマのheader.phpに上記のコードをペーストする。
皆様におかれましてはとっくにご存知だと思うけれど、子テーマを作成して、そちらのテーマファイルにペーストすることで、テーマのバージョンアップがあっても影響を受けることがない。
バックアップを忘れずに！
作業中、何か問題が発生しても対応できるスキルをお持ちのあなたなら、テーマファイルのバックアップなんか必要ないかもしれない。
しかし、永遠の素人の僕は、そういうわけにはいかない。
だから、テーマファイルに変更を加える前に必ずバックアップを取っている。
バックアップといっても難しいことをしているわけではない。
テーマファイルはテキストで構成されているので、Macのメモにコピペしているだけ。
ちなみに、追加CSSに記載した内容も、同じ方法でバックアップしている。
3.外観＞追加CSSに追記
このUkuというテーマで、あてる範囲をピックアップするとCSSは下記の通り。
body,
.single-post .entry-content p, .page .entry-content p, .page .entry-content, .entry-content ol, .entry-content ul, .blog.blog-classic .blog-wrap .entry-content ,
h1.site-title a,
p.site-title a,
.entry-summary,
.widget,
.title-footer,
.entry-header p.intro,
.entry-content,
.entry-content p,
.entry-content table,
.entry-content dl,
.entry-content ul,
.entry-content ol,
p.section-about-text,
p.text-big,
p.text-small,
#secondary h2.widget-title,
#sidebar-page h2.widget-title,
.entry-content blockquote p,
.entry-content p span.uppercase,
.section-about-column-two .social-nav ul li a,
.section-about-column-one p cite,
.widget_mc4wp_form_widget input[type=”email”],
.widget_mc4wp_form_widget input[type=”submit”],
.jetpack_subscription_widget #subscribe-email input[type=”email”],
.jetpack_subscription_widget #subscribe-submit input[type=”submit”],
.contact-form input[type=”submit”],
input,
textarea,
.site-content div.wpcf7 input,
.site-content div.wpcf7 textarea,
.site-content div.wpcf7 p,
a.standard-btn,
div.sharedaddy h3.sd-title,
.widget h2.widget-title,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.big-instagram-wrap .clear,
.single-product .entry-summary h1,
.uku-standard.blog-classic .more-link
{
font-family: ‘M PLUS 2’, sans-serif;
}
なにせ「本質と基本」を理解していない男。
正しい知識に基づいていないので、不調法な点があったらお許しを。
効果はあったのか？
@importからlinkタグに変更したことで効果はあったのか？
Googleが言うようにサイトの読み込みが速くなったのか？
と問われれば、そこに変化は全く見られない。
体感では、これまで通り。
正確な測定をすれば変化があるのかもしれないけれど、あんまり気にしていない。
そんなことよりも長年の疑問が解けたことの方が、はるかに嬉しい。
だって何年もモヤっとしていたものをスッキリ吹き飛ばす瞬間なんて、そうそうお目にかかれないもんね…
