【自分用メモ】源ノ明朝をWebフォントで使うときのコツ

先日、実務で初めて源ノ明朝を使ったので、そのときの対応をメモとして残しておこうと思います。

導入方法

源ノ明朝はCDNで配布されてませんので、まずはフォントファイルをダウンロードします。
フォントファイルはGitHubからダウンロードできます。

ダウンロードすると拡張子がotfなのですが、IEなどにも対応させる為にwoffに変換します。
woffへの変換ツールはいろいろありますが、自分はこれを使っています。
WOFFコンバータ

変換できたらCSSで読み込みます。

あとは好きなところでfont-familyに設定してあげましょう。

源ノ明朝設定デモ

表示のタイムラグを解消

しかし設定してみるとわかるのですが、源ノ明朝は読み込み時に少し表示が遅れ、その間テキストが表示されなくなります。

なので、そのための対策をしてあげましょう。
webfontloaderというプラグインを使います。

webfontloaderはWebフォントの読み込みを検知して、それをトリガーとすることができます。

CDNがありますので、それを読み込んであげましょう。

読み込んだらJSで設定します。

WebFont.load(
{
custom:
{
families: ["源ノ明朝"]
},
active: function()
{
$('body').addClass('webfont');//フォントを読み込んだら動作
}
});

これでフォントを読み込むと、bodyタグにwebfontクラスが付きます。

あとはCSSでクラスによってフォントを切り替えるようにしてあげるといいです。
mixinで作っておくと、見出しだけとか使いたいところに適用できて便利です。

これで最初からテキストが表示されます。

webfontloader設定デモ

まとめ

明朝体メインのサイトを制作するのに、最初にテキストが表示されないのが見た目にわかってしまうのが辛いなと思って、調べてみて見つけました。

CSSで設定する方法もあるようですが、そちらは今のところchromeでしか効かないので、今回はなしという判断です。

サイトの雰囲気に合わせるためのWebフォントなのに、代わりの明朝体を設定するのもどうかなと思ったのですが、何も表示されてないよりはいいかと。
これからどんどんWebフォント使う機会が増えてくるでしょうし、覚えておいて損はなさそうだと思いました。

参考：
webfontloaderでWebフォントの読み込みを行う