フリーフォントをサブセット化してWebフォントにしてみる

2021年2月12日2021年2月14日

近年、個人でも商用でも無料で利用できる
日本語のフリーフォントを紹介している
記事等を多くみかけますね。
おしゃれなフォントやカッコいいフォントを
自身のWebサイトに使いたいと思いますが、
「全部の文字はいらねぇんだよな・・・」
なんて思ったりしませんか？

はじめに

例えば、
上 目次の「Contents」という文字、
ダウンロードしたフォント
(x12y16pxLineLinker)を
「Contents」と言う文字だけ抜き出して
Webフォントとして利用しています。

このように、
フォントに含まれる文字の中から
必要な文字だけを抜き出し
ファイルサイズを小さくして
利用する事をサブセット化と言います。

今日は
「ダウンロードしたフォントを
サブセット化してWebフォントとして
利用する方法」と「Googleフォントの
サブセット化」についてお話します。

Downloadしたフォント

先ずは、
好みのフォントをダウンロードと
フォントツールのインストールが必要となります。

ここでは、
見出し(h2、h3)に使われている
フォント「源界明朝げんかいみんちょう」を
ダウンロードします。
書体コンセプトは
読める限界ギリギリまで
破壊された世界観の
見出し向け明朝体と言う事です。

フォントツールは
サブセットフォントメーカーと
WOFFコンバータをインストールします。

サブセットフォントメーカー

フォントに格納する文字

もし、メインに使いたいフォントなら
「第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな」を
コピーし、サブセットフォントメーカーの
フォントに格納する文字の部分にペーストします。
ちなみに「第二水準漢字」まで欲しい場合は
こちらのブログに掲載してあります。

WOFFコンバータ

サンプル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にコンバート、さらにサブセット後の
比較になります。

※ サブセット後のサイズは文字数により変化します。

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フォントも、
決まったテキストにだけ適用させたい時は
大いに役立ちます。

↓ ライセンスについてお読みください。