NotoSansJP・YakuHanJPをサブセット化＆本文（body）に使う方法cocoon向け

Noto Sans JPとYakuHanJPを用いた読みやすく軽量なサイトを作る方法を説明します。cocoonだけでなくワードプレスでブログを運営する誰でも簡単に実装することができます。

実際にサイトのフォントとしてNoto Sans JPとYakuHanJPを用いてみると下の画像のようになります。

約物が詰められるYakuHanJPを用いることで、括弧や句読点などの文字と、通常の文字の間に生じる間抜けな空白を詰めることができています。

1，フォントをダウンロード
- Noto Sans JPをダウンロード
- YakuHanJP
2，フォントをサブセット化＆woff2に変換
3，フォントをアップロード
- Noto Sans JPをアップロード
- YakuHanJP
4，フォントをブログに表示させる
まとめ Noto Sans JPとYakuHanJPをサブセット化して使う方法

1，フォントをダウンロード

Noto Sans JPをダウンロード

Google Fonts: Noto Sans Japanese

Noto is a global font collection for writing in all modern and ancient languages. Noto Sans JP is an unmodulated (“sans serif”) design for the Japanese language

上のリンクからNoto Sans JPをダウンロードします。

右上の「Download Family」をクリックすればOKです。

YakuHanJP

https://github.com/qrac/yakuhanjp/archive/refs/tags/3.4.1.zip

上のリンクからYakuHanJPもダウンロードします。

こちらの公式ページから約物のシミュレーションもできます。
Yaku Han JP – 約物半角専用のWebフォント

YakuHanJPはサブセット化の余地がないのでそのままアップロードします。

2，フォントをサブセット化＆woff2に変換

こちらの記事を参考にしてサイトにwoff2ファイルをアップロードするところまで進めます。

3，フォントをアップロード

Noto Sans JPをアップロード

画像に alt 属性が指定されていません。ファイル名: image-19-1024x355.png

「https://economylife.net/wp-includes/fonts/WebNotoRegular.woff2」

上記の階層にFTPソフト等を用いてフォントをアップロードします。

なおサブセット化の際にフォント名を「WebNotoRegular」に変更したのでそうなっています。

自身のドメインに置き換えて下さい。

YakuHanJP

「https://economylife.net/wp-includes/fonts/YakuHanJP-Regular.woff2」

YakuHanJPは極めて軽量というかすでにサブセット化の余地はないのでそのままアップロードします。

Noto Sans JPをアップロードするのと同様の手順でいけます。

4，フォントをブログに表示させる

style.cssに追記する

Cocoon Childのスタイルシート (style.css)にフォントを使用する旨を記述します。

@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: normal;
    src: local("Noto Sans CJK JP Regular"),
    url('https://economylife.net/wp-includes/fonts/WebNotoRegular.woff2') format('woff2');
	font-display: swap;
}
.font-Noto Sans JP {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400,700;
}
@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: normal;
    src: url("https://economylife.net/wp-includes/fonts/YakuHanJP-Regular.woff2") format("woff2");
	font-display: swap;
}
.font-YakuHanJP {
  font-family: "YakuHanJP", sans-serif;
  font-weight: 400,700;
}

body{
    font-family: "YakuHanJP","Noto Sans JP", sans-serif;
	font-weight: 400,700;
}

ドメインは各々置き換えてください。

ちなみに「font-display: swap;」の一行がないだけでサイトの表示が2秒遅くなります。必ず書きましょう。

フォントをプリロードさせる


<link rel="preload" href="https://economylife.net/wp-includes/fonts/WebNotoRegular.woff2" as="font" type="font/woff2" crossorigin>

<link rel="preload" href="https://economylife.net/wp-includes/fonts/YakuHanJP-Regular.woff2" as="font" type="font/woff2" crossorigin>

上記のコードをCocoon Childのhead-insert.php (tmp-user/head-insert.php)に追記します。

ドメインは置き換えてください。（ｎ度目）