ブログのテーマを自分で作っていると、ふと「フォントって、こだわった方がいいのかな?」と迷いませんか。結論から言うと、こだわらなくても大丈夫です。でも、見出しだけフォントを変えると、サイトの雰囲気が一気に「自分らしく」なります。今回は、ページを重くせずに、見出しだけおしゃれにする方法を紹介します。WordPressの新しい機能を使うので、むずかしいコードは出てきません。
日本語のフォントには「重い」という落とし穴がある
いきなり好きなフォントをサイト全体に使いたくなりますが、ちょっと待ってください。日本語のWebフォント(ネット経由で読み込むフォント)には、「重い」という落とし穴があるんです。
英語のフォントは、アルファベットなど文字数が少ないので軽くできます。ところが日本語は、ひらがな・カタカナ・漢字をあわせると数千文字。そのぶんファイルがとても大きく、数メガバイトにもなります。これはたとえるなら、分厚い国語辞典を、ページを開くたびに毎回かばんから出すようなもの。読み込みに時間がかかって、ページの表示が遅くなります。
表示が遅いと、読みに来てくれた人が「重いな」と感じて、開く前に離れてしまうことがあります。さらに、ページの速さは検索の順位にも影響すると言われています。せっかくのおしゃれなフォントが、読者を逃す原因になっては本末転倒ですよね。
正解は「本文はそのまま、見出しだけ着替える」
では、どうするか。答えはシンプルで、本文は端末に最初から入っているフォントを使い、見出しだけお気に入りのフォントを1つ載せる、という方法です。
パソコンやスマホには、もともと読みやすいフォントが入っています(Macはヒラギノ、Windowsは游ゴシック、スマホはNotoなど)。この「最初から入っているフォント」を本文に使えば、新しく読み込むものがゼロなので、まったく重くなりません。文章をたくさん使う本文こそ、この軽いフォントにまかせるのが賢いやり方です。
そのうえで、見出しだけ、おしゃれなフォントを1つだけ着せてあげる。見出しは文字数が少ないので、これなら重さもごくわずかで済みます。服でいえば、ふだん着は身軽に、よそ行きの一点だけ華やかに、という感覚です。
注意:「システムの明朝」はスマホで化ける
ここで、つまずきやすい落とし穴をひとつ。「それなら、見出しも端末のフォントで明朝にすればいいのでは?」と思うかもしれません。でも、これはおすすめできません。
明朝だけは事情がちがいます。スマホ、とくにAndroidには明朝のフォントが入っていないことが多く、「明朝で」と指定しても、スマホではゴシックに化けてしまいます。つまり、パソコンでは明朝・スマホではゴシック、と見た目がバラバラに。これでは台無しです。
なので、明朝の見出しにしたいなら、見出しだけはWebフォントをきちんとひとつWebフォントとして入れるのが正解です。本文は軽い端末フォントのままなので、これでも全体は十分軽く保てます。
フォントライブラリなら、クリックだけで入る
「Webフォントを入れる」と聞くと身構えますが、最近のWordPressは、管理画面からクリックだけで入れられるようになりました。「フォントライブラリ」という機能です。手順はこれだけです。
- 管理画面の「外観 → エディター」を開く
- 「スタイル → タイポグラフィ → フォント」と進む
- Google Fontsから好きなフォントを検索して、インストール
※フォントの太さ（ウェイト）を全部ダウンロードするとサイトが重くなるので、本文と見出しを兼ねられる「Semi-Bold（600）」1種類だけにするなど、最低限に絞るのがコツです。
これだけで、フォントが自分のサーバーに保存され(これを「セルフホスト」と言います)、すぐ使える状態になります。むずかしい設定ファイルをさわる必要はありません。明朝なら、たとえば「Shippori Mincho(しっぽり明朝)」が上品でおすすめです。
一度決めれば、あとは全部自動
フォントを入れたら、最後に「見出しはこのフォントで」と一度だけ決めます。「スタイル → タイポグラフィ → 見出し」で、入れたフォントを選ぶだけです。
これは、お店に「うちの見出しは、ぜんぶ明朝でいきます」というルールを一枚貼り出すようなものです。一度貼れば、これから書く記事の見出しも、昔書いた記事の見出しも、ぜんぶ自動でそのフォントになります。記事ごとに、いちいち指定する必要はありません。
気が変わって別のフォントにしたくなっても、この一か所を変えるだけ。サイト中の見出しがいっぺんに入れ替わります。記事を一つずつ直して回らなくていいのは、本当にラクですよ。
補足:theme.jsonとの違いは？
少し補足すると、WordPressのフォントライブラリはテーマファイルを直接編集するものではありません。
従来は theme.json にフォント設定を記述して管理することが一般的でしたが、フォントライブラリを使うことで管理画面からフォントを追加・変更できるようになりました。
そのため、CSSや theme.json を編集しなくてもフォントを利用できるのが大きなメリットです。
一方で、フォントライブラリで追加したフォントは、後から管理画面で登録される仕組みのため、テーマ側の theme.json から直接参照する用途にはあまり向いていません。
サイト制作やテーマ開発を行う場合は theme.json、普段のサイト運営で手軽にフォントを変更したい場合はフォントライブラリ、と考えるとわかりやすいでしょう。
まとめ:軽さと「らしさ」の両取り
日本語フォントは、全部に使うと重くなります。だから、本文は端末まかせで軽く保ち、見出しだけWebフォントを1つ着せる。これが、軽さと「自分らしさ」を両取りするコツです。
そして、その「見出しだけ1つ」は、フォントライブラリを使えばクリックだけで入ります。むずかしいコードはいりません。フォントにこだわりがなくても、見出しをひとつ着替えるだけで、サイトの印象はぐっと良くなります。よかったら、試してみてくださいね。