CocoonでAdobe Fontsを使う方法

このサイトはさくらのレンタルサーバーを利用しているので、フォントは無料で使える「TypeSquare」を利用していました。モバイル重視で「UD新ゴコンデンス90」を本文に使っていたのですが、確かに狭い画面での情報量が多く視認性も良いんですが、横が詰まって窮屈さが気になってきました。（歳のせいですかね？）それで新しい本文用のフォントを探したのですが気に入ったものが見つかりません。

普段使っているiPhoneやiPadやMacでは「ヒラギノ角ゴ」がシステムフォントとして採用されていて、本当に見やすさと美しさを兼ね備えたいいフォントだなといつも思っているのですが、残念ながら無料で使えるフォントリストには入っていません。

仕方が無いのでヒラギノに匹敵する品質でCJK（中国語、日本語。韓国語）を完備し、豊富なウェイトを取りそろえて、なおかつ無料というすごいフォント「源ノ角ゴシック」を使用することにしました。

WordPressを使用するようになって久しいですが、ここしばらくはCocoonというテーマを使わせていただいています。大変高機能かつ見栄えする素晴らしいテーマです。こんな素晴らしいテーマを無料で公開されているだなんて大感謝です。

このテーマのフォント設定はいくつかのプリセットから選択する方式で実質的に「源ノ角ゴシック」と同一の「Noto Sans」が選べるのですが、Google Fontsなので中国在住の私には金盾に阻まれて表示できないという致命的な結果になってしまいます。

ここで以前契約したAdobe CCにAdobe Fontsが含まれている事を思い出しました。「源ノ角ゴシック」はAdobeが開発しているのでもちろん利用できます。

CocoonでAdobe Fontsを利用する方法は意外と検索しても見つからないので記事にしてみようと思います。Adobe FontsのWebプロジェクトは作成してある前提です。手順はこちらを参照してください。

Cocoonの子テーマを編集します。子テーマについてはこちらを参照。WordPressのダッシュボードから「テーマ」を選択して、「テーマの編集」を選んでください。

次にテーマファイルの「tmp-user」の中にある「head-insert.php」を以下のように編集してください。変更できなくて困ったらこちらを参照。

<?php
//ヘッダー部分（<head></head>内）にタグを挿入したいときは、このテンプレートに挿入（ヘッダーに挿入する解析タグなど）
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
//例：<script type="text/javascript">解析コード</script>
?>
<?php if (!is_user_administrator()) :
//管理者以外カウントしたくない場合は
//↓ここに挿入?>

<?php endif; ?>
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>
<script>
  (function(d) {
    var config = {
      kitId: 'ここにプロジェクトIDを入れる',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

そのあとダッシュボードの「外観」→「CSS 編集」→「追加 CSS」で下記を追加してください。

body{
font-family: source-han-sans-cjk-ja, sans-serif !important;
font-weight: 400;
font-style: normal;
}

もちろんフォントに合わせて変更してください。!importantが文字通り重要です。これを入れないと「Cocoon 設定」で選択したフォントがそのまま表示されてしまいます。

これでAdobe Fontsが表示できるようになったと思います。WindowsだろうがMacだろうがAndoroidだろうがUbuntuだろうが同じフォントで表示されるはずです。

しかし残念ながらWindowsではあまりきれいに表示できません。要するにWindowsのOSとしての問題のようです。ニンともカンとも。