フリーフォントをサブセット化してWebフォントにしてみる
この記事は約 7 分で読めます。
近年、個人でも商用でも無料で利用できる
日本語のフリーフォントを紹介している
記事等を多くみかけますね。
おしゃれなフォントやカッコいいフォントを
自身のWebサイトに使いたいと思いますが、
「全部の文字はいらねぇんだよな・・・」
なんて思ったりしませんか?
はじめに
例えば、
上 目次の「Contents」という文字、
ダウンロードしたフォント
(x12y16pxLineLinker)を
「Contents」と言う文字だけ抜き出して
Webフォントとして利用しています。
「Contents」と言う文字だけなら.woff2
(Contents.woff2
)で816バイトです!
このように、
フォントに含まれる文字の中から
必要な文字だけを抜き出し
ファイルサイズを小さくして
利用する事をサブセット化と言います。
今日は
「ダウンロードしたフォントを
サブセット化してWebフォントとして
利用する方法」と「Googleフォントの
サブセット化」についてお話します。
Downloadしたフォント
先ずは、
好みのフォントをダウンロードと
フォントツールのインストールが必要となります。
ここでは、
見出し(h2、h3
)に使われている
フォント「源界明朝」を
ダウンロードします。
書体コンセプトは
読める限界ギリギリまで
破壊された世界観の
見出し向け明朝体と言う事です。
フォントツールは
サブセットフォントメーカーと
WOFFコンバータをインストールします。
サブセットフォントメーカー

- 作成元フォントファイル
軽量化するフォントを指定します。 - 作成後フォントファイル
軽量化した後のフォントの保存場所を指定します。 - フォントに格納する文字
ここでは見出しに必要な文字を入力。
メインに使いたいフォントなら以下の手順でコピペします。 - 書体名を変更する
チェックを入れ、任意の書体名にする。 - 作成終了後、WOFFコンバータを起動する
チェックを入れると作成終了後、WOFFコンバータが起動します。 - 作成開始でサブセット化を開始
フォントに格納する文字
もし、メインに使いたいフォントなら
「第一水準漢字+記号+ローマ字+カタカナ+ひらがな」を
コピーし、サブセットフォントメーカーの
フォントに格納する文字の部分にペーストします。
ちなみに「第二水準漢字」まで欲しい場合は
こちらのブログに掲載してあります。
WOFFコンバータ

- 変換前ファイル
サブセットフォントメーカーで軽量化したフォントを指定します。 - 変換後ファイル
変更した後のファイル名を指定しますが、設定されていない場合、変換前ファイルと同じ名前で拡張子だけ変えて自動作成します。 - WOFF2を作成する
チェックをいれ作成します。(WOFFファイルについては以下を参照。) - EOTファイルを作成する
チェックをいれ作成します。(EOTファイルについては以下を参照。) - サンプルHTMLファイルを作成する
サンプル文字列に任意の文字列を入れ作成します。
サンプルHTMLファイル
CSS
@font-face {
font-family: "myFont";
src: url("genkai-mincho.eot?") format('eot'),
url("genkai-mincho.woff2") format('woff2'),
url("genkai-mincho.woff") format('woff');
}
.myFontClass {
font-family: "myFont";
}
HTML
<p>サンプル文字列は「<span class="myFontClass">フォントに格納する文字</span>」です。</p>
結果
サンプル文字列は「フォントに格納する文字」です。
EOTファイルとは
EOTファイル拡張子またはEmbedded Open Type拡張子は、Webコンテンツ、特にInternet Explorerブラウザーを使用して検索するコンテンツの基本フォントタイプとしてWebページで使用されるフォント形式の拡張子です。 EOTは主にInternet Explorer Webブラウザー用に作成されたもので、MozillaやChromeなどの他のユーザーには機能しない可能性があります。
.EOT – EOTファイルを開く方法? EOTファイル拡張子 (fileinfo.jp)
WOFFファイルとは
.WOFFまたはWebオープンフォント形式のファイルは、Webページのフォントをカスタマイズするために使用されます。 WOFFファイルは、最近多くのWeb開発者によって使用され、過去にInternet Explorerで使用されていた古いタイプに代わるより一般的なWebフォント形式です。ユーザーはフォントを「オープン」にカスタマイズでき、ブラウザで認識できるため、標準形式ではなくWOFFファイルが使用されるようになりました。
.WOFF – WOFFファイルを開く方法? WOFFファイル拡張子 (fileinfo.jp)
WOFF2ファイルとは
WOFF2はWOFFファイル形式の後継であり、20%優れた圧縮を提供します。
ファイルサイズの変化
源界明朝の.ttf
ファイルは 21.9MB ありますが、
WOFFにコンバート、さらにサブセット後の
比較になります。
ファイル形式 | .ttf | .woff | .woff2 | .eot |
ファイルサイズ | 21.9MB | 12.9MB | 9.54MB | 11.8MB |
サブセット後のサイズ | 67.7KB | 41.8KB | 34.1KB | 37.8KB |
※ サブセット後のサイズは文字数により変化します。
Googleフォント
おしゃれなwebフォントが
気軽に実装できる「Googleフォント」、
皆さまもお使いの事と思います。
この「Googleフォント」の
サブセット化をしてみましょう。
Googleフォントを設定
まずはGoogleフォントを設定します。
GoogleフォントのWebサイトから
今回は例として「Hachi Maru Pop」という
フォントを設定してみます。

<link> 部分に書かれたコードを、HTMLファイルの head
内に記述します。
「CSS rules to specify families」に書かれたコードを、
CSSファイルの、フォントを適用させたい要素に対して記述します。
font-family: 'Hachi Maru Pop', cursive;
サブセット化
実際に使う文字だけ抜き出すサブセット化をしてみます。
Googleフォントを読み込ませるときに
HTMLの head
内に記述したURLに&text=
に続けて必要な文字を入力するだけです。
<link href="https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap&text=毎月22日はにゃ~にゃ~の日です♪" rel="stylesheet">
ここでは「毎月22日はにゃ~にゃ~の日です♪」を設定しています。
結果
サンプル文字列は「毎月22日はにゃ~にゃ~の日です♪」です。
試しに違う文字列は「今月23日は天皇誕生日です☆」
と、「今、3、天皇誕生、☆」は変換されません。
最後に
いかがでしたでしょうか?
Googleフォントに関しては、
サブセットに含める文字が多くなると
指定も長くなってしまいますが、
ダウンロードしたフォントも、
Googleフォントも、
決まったテキストにだけ適用させたい時は
大いに役立ちます。
↓ ライセンスについてお読みください。
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
諜報部員参上☆
サイバー空間での国際諜報活動にいそしんでます(笑)
こちらのコラムをチャンと読まないと、次のコラムが理解出来ないことが分かりました。
gooの有料版で使えそうなものでしょうか?
22日22並びの時刻の猫、登場予定です。
遅くなり申し訳ございません。
コメントありがとうございます。
国際?海外からでしょうか?
ご理解頂きましてありがとうございます。
gooの有料版、微妙なのですね。
Google Fonts なら使えるかもしれません。
参加くださいましてありがとうございます。
楽しみにしております。