先日、実務で初めて源ノ明朝を使ったので、そのときの対応をメモとして残しておこうと思います。
導入方法
源ノ明朝はCDNで配布されてませんので、まずはフォントファイルをダウンロードします。
フォントファイルはGitHubからダウンロードできます。
ダウンロードすると拡張子がotfなのですが、IEなどにも対応させる為にwoffに変換します。
woffへの変換ツールはいろいろありますが、自分はこれを使っています。
WOFFコンバータ
変換できたらCSSで読み込みます。
font-family: “源ノ明朝”;
src: url(“font/SourceHanSerif-Regular.woff”) format(“woff”), url(“font/SourceHanSerif-Regular.otf”) format(“opentype”);
}
あとは好きなところでfont-familyに設定してあげましょう。
表示のタイムラグを解消
しかし設定してみるとわかるのですが、源ノ明朝は読み込み時に少し表示が遅れ、その間テキストが表示されなくなります。
なので、そのための対策をしてあげましょう。
webfontloaderというプラグインを使います。
webfontloaderはWebフォントの読み込みを検知して、それをトリガーとすることができます。
CDNがありますので、それを読み込んであげましょう。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js?ver=4.9.1'></script>読み込んだらJSで設定します。
WebFont.load(
{
custom:
{
families: ["源ノ明朝"]
},
active: function()
{
$('body').addClass('webfont');//フォントを読み込んだら動作
}
});
これでフォントを読み込むと、bodyタグにwebfontクラスが付きます。
あとはCSSでクラスによってフォントを切り替えるようにしてあげるといいです。
mixinで作っておくと、見出しだけとか使いたいところに適用できて便利です。
font-family: “游明朝”, “Yu Mincho”, “YuMincho”, serif;
.webfont &{
font-family: “源ノ明朝”, serif;
}
}
これで最初からテキストが表示されます。
まとめ
明朝体メインのサイトを制作するのに、最初にテキストが表示されないのが見た目にわかってしまうのが辛いなと思って、調べてみて見つけました。
CSSで設定する方法もあるようですが、そちらは今のところchromeでしか効かないので、今回はなしという判断です。
サイトの雰囲気に合わせるためのWebフォントなのに、代わりの明朝体を設定するのもどうかなと思ったのですが、何も表示されてないよりはいいかと。
これからどんどんWebフォント使う機会が増えてくるでしょうし、覚えておいて損はなさそうだと思いました。