3ヶ月前に投稿

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

2021年2月14日

この記事は約 7 分で読めます。

4.5

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

はじめに

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

Really?

「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
21.9MB
.woff
12.9MB
.woff2
9.54MB
.eot
11.8MB
ファイル形式.ttf.woff.woff2.eot
ファイルサイズ21.9MB12.9MB9.54MB11.8MB
サブセット後のサイズ67.7KB41.8KB34.1KB37.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フォントも、
決まったテキストにだけ適用させたい時
大いに役立ちます。

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

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

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