目的

源ノ明朝をウェブフォントとして利用したいけどハイパー重いので、ひらがな・カタカナ・よく使う英数記号・常用漢字だけを抜き取って書き出したい。

下準備

あらかじめPythonがインストールされている環境で（MacだとHomebrewで入れるのが良さそう）、fonttools と brotli をインストール。

> pip install fonttools brotli

作業

以下の例は源ノ明朝のサブセットを作る流れです。

  1. 最新フォントデータをダウンロードする
    https://github.com/adobe-fonts/source-han-serif/tree/release/OTF/Japanese
  2. 収録する文字を用意する。例) subset_joyo.txt
  3. 各ファイルを適当なディレクトリにまとめて、pyftsubsetに投下。
    （以下は SourceHanSerif-Medium を SHS-M-joyo として書き出す例）

    > pyftsubset ./SourceHanSerif-Medium.otf --text-file=./subset_joyo.txt --layout-features='*' --flavor=woff --output-file=./SHS-M-joyo.woff
> pyftsubset ./SourceHanSerif-Medium.otf --text-file=./subset_joyo.txt --layout-features='*' --flavor=woff2 --output-file=./SHS-M-joyo.woff2

結果

概ね現実的なサイズまで小さくなりました。

  • woff : 1.7MB
  • woff2 : 1.4MB

使ってみる

@font-face {
  font-family: "mincho";
  src: url("./SHS-M-joyo.woff2") format('woff2'),
  		url("./SHS-M-joyo.woff") format('woff');
}
.mincho {
	font-family: mincho,serif;
	font-feature-settings: 'palt';
	font-size: 24px;
	letter-spacing: 0.7px;
}
表示例） abcABC・あいうえお・サンプルテキスト・常用漢字・源ノ明朝

補足

毎回フォントファイルを読み込んでしまう場合は、 .htaccess に以下の指定を入れておく。

AddType application/font-woff  .woff
AddType application/font-woff2  .woff2

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/font-woff
AddOutputFilterByType DEFLATE application/font-woff2
</IfModule>

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/font-woff "access plus 1 year"
ExpiresByType application/font-woff2 "access plus 1 year"
</ifModule>

補足2

他所から参照されないようにしておくと安心。
参照 : .htaccess – Prevent others from leaching/downloading fonts using htaccess? – Stack Overflow

SetEnvIfNoCase Referer "^https?://([^/]*)?textbox\.jp/" local_ref=1
SetEnvIf Referer ^$ local_ref=1

<FilesMatch "\.(woff|woff2)$">
  Order Allow,Deny
  Allow from env=local_ref
</FilesMatch>