今回は、Webフォント (.woff,.woff2,.ttf,.otf) をBase64エンコードして、スタイルシートに直接埋め込む方法について見ていきたいと思います。
WebフォントをCSSに直接埋め込むやり方は、調べた限りではあまりメジャーな方法ではなく、統一された記述方法があるわけでも無いようです。
そのため、現在のWebブラウザでは表示できていても、今後表示できなくなる可能性もありますので、あくまでもこの方法は、無料ブログを利用していてフォントファイルを置く場所がない場合などの、応急処置的なやり方と捉えて頂けると幸いです。
フォントの準備
フォントのライセンスを確認
フリーフォントとして提供されているものの中には、利用条件として、再配布や改変、Webフォントとしての利用を禁じているものがあります。
Webフォントとして使用する前に、そのフォントの利用条件を確認しておくのがベターです。
ライセンス表記についてはこちらのサイトが参考になりそうです。
使いたいフォントの軽量化 (サブセットフォント化)
フォントファイルをBase64エンコードすると、情報量がエンコード前よりも増えてしまうため、元からファイルサイズが大きくなりがちな日本語フォントの場合は、使いたい文字だけをフォントから抽出するサブセット化がほぼ必須です。
そのフォントで表示させたい文字が明確に決まっていない場合は、英字+ひらがな+カタカナ+第一水準漢字のみを含んだサブセットフォントを作成しておけば日常使いでは問題ないかと思います (ただ、IEでは、英字+ひらがな+カタカナのみのフォントであっても、CSSに直接埋め込んだ場合には上手く表示されないことがありました)。
文字の一覧はこちらのサイトが比較的コピーし易かったです。
フォントのサブセット化を行えるツールとしては、サブセットフォントメーカーというフリーソフトがおすすめです。
サブセットフォントメーカーの使い方についてはこちらのサイトが参考になるかも。
サブセットフォントをさらに woff 形式に変換してもっと軽量化
なるだけ、Base64エンコードする前にフォントのファイルサイズをより小さくしたい場合はフォントを.ttfや.otfから、.woffや.woff2へと変換します。
.woff(.woff2ではなく) に変換すると、試した限りでは IE11 でも表示されましたので、多くのブラウザに対応させたい場合、.woffを使うのが良い気がします。
.woffや.woff2への変換が行えるフリーソフトとしては、WOFFコンバータというものがあります。
フォントをBase64エンコード
先ほど作成したサブセットフォントの.ttfや.otf、または、.woffや.woff2をBase64エンコードします。
Base64エンコードは以下のツールより行うことができます。
使い方
1.「ファイルを選択」ボタンから、Base64エンコードしたいフォントファイルを選択します。(フォント以外のファイルをBase64エンコードすることもできます。ただし、サイズの大きいファイルを読み込むとブラウザがフリーズする可能性があるのでご注意ください)
2. しばらく待つとエンコードされた文字列が生成されます。コピーはCtrl + A、Ctrl + Cなどからお願いします。(全選択、コピーが完了するまでにも多少時間が掛かります)
上手く作動しない場合は他のツールやフリーソフトをご利用ください。
サイズの大きなファイルを読み込んだときには、処理が終了するまで多少時間が掛かりますので暫くお待ちください。場合によっては、ブラウザがフリーズする可能性もありますので、なるべくサイズの小さなファイルを選択することをおすすめします。
スタイルシートに埋め込み
@font-faceでフォントを定義
スタイルシートに以下のような形で埋め込みたいフォントを定義します。
/* 拡張子が .woff のフォントを埋め込む場合 */
@font-face {
font-family: "Web Open Font X";
src: url("data:application/font-woff; charset=utf-8; base64,ﾍﾞｰｽﾛｸﾖﾝ") format("woff");
}
/* 拡張子が .woff2 のフォントを埋め込む場合 */
@font-face {
font-family: "Web Open Font2 X";
src: url("data:application/font-woff; charset=utf-8; base64,ﾍﾞｰｽﾛｸﾖﾝ") format("woff2");
}
/* 拡張子が .ttf のフォントを埋め込む場合 */
@font-face {
font-family: "TrueType Font X";
src: url("data:application/x-font-ttf; charset=utf-8; base64,ﾍﾞｰｽﾛｸﾖﾝ") format("truetype");
}
/* 拡張子が .otf のフォントを埋め込む場合 */
@font-face {
font-family: "OpenType Font X";
src: url("data:application/x-font-otf; charset=utf-8; base64,ﾍﾞｰｽﾛｸﾖﾝ") format("opentype");
}
font-familyに指定している"～～ X"というフォント名は仮のものですので、お好みで変更ください。
上の「ﾍﾞｰｽﾛｸﾖﾝ」部分には、フォントをBase64エンコードして生成された、長い長い文字列を入れてください。
日本語フォントの場合は非常に記述が長くなるため、かなりごちゃごちゃした印象になります。
Bloggerの記事HTMLにstyleタグを作成して、そこに@font-faceを定義することもできますが、記事編集を行う場合にはかなり辛いものがあるかも知れません...
埋め込んだフォントを適用したい要素に指定
通常のフォントと同じく、に@font-faceに定義した埋め込みフォントの名前を、適用したい要素のfont-familyに指定します。
たとえば、上の@font-faceの一番はじめの例で出てきた"Web Open Font X"を、HTMLのテキストエリア<textarea></textarea>に適用させたい場合は
textarea {
font-family: "Web Open Font X", BlinkMacSystemFont, YuGothic, sans-serif;
font-size:20px;
font-weight:500;
line-height:1.5;
}
というような感じでfont-familyに埋め込みフォントの名前を指定すればOKです。font-familyに書いた"Web Open Font X"以外のフォントは、埋め込みフォントが上手く読み込まれなかったときの代替フォントの指定です。この指定はお好みで。
余談ですが、埋め込みフォントをテキストエリアに設定すると、試し書きができるので、ちゃんと埋め込みフォントが適用されているかを確認するのに便利です。
