WebFontの便利さについては重々承知しておりますが、いかんせん私みはら（@masashi_385）は日本人なもので、英字フォントだとなかなか使いどころを見つけられていませんでした。というか、WebFontとして使える日本語フォントとか、じつはあるんじゃねーの？と思って調べてみたら、すばらしいまとめを見つけました。
見事ですね。カンペキです。ありがとうございます。
もはや、今回はこれで終了なカンジですが、どうせなので、WebFontの使い方を紹介します。GoogleのWebFontの使い方は前にも紹介しましたので、こちらもどうぞ。
フリーの日本語フォントをWebFontとして使う方法
フォントをダウンロード
まずは、先ほどのヨモツネットさんの記事を参考に、WebFontとして使いたいフォントをダウンロードします。今回は「あんずもじ」を例にします。あんずもじについてはこちらをどうぞ。
ダウンロードしたファイルを解凍すると、大抵はTTF形式のフォントファイルになっていると思います。このままでもいいんですが、IEにも対応させたいというときには、TTF形式からEOT形式に変換してやらないとダメなんです。TTF形式のフォントファイルをEOT形式に変換するにはこちらをどうぞ。
フォントをサーバにアップロード
WebFontとして使いたいファイルが準備できたらサーバにアップロードします。WordPressであれば、テーマフォルダにいれるといいんじゃないでしょうか？みはら.comだったらここですね。
[cc]
https://miha5.com/wp-content/themes/miha5/
[/cc]
いや、別にどこにアップロードしたっていいんですけど、テーマとしてまとめておいたほうが、リニューアル時とかにスッキリすると思いますよ。
CSSに@font-faceを
無事アップロードが終わったら、CSSに@font-faceを追加して、WebFontとして利用できるようにします。CSSに次のコードを追加すると、「あんずもじ」をWebFontとして使えるようになります。
[cc lang=”css”]
/* Firefox, Opera, Safari */
@font-face {
font-family: APJapanesefont;
src: url(APJapanesefont.ttf) format(“truetype”);
}
/* IE */
@font-face {
font-family: APJapanesefont;
src: url(APJapanesefont.eot);
}
[/cc]
そして、あとはWebFontを適用したいところで、font-familyを指定すれば完了です。
[cc lang=”css”]
h1 {
font-family: APJapanesefont;
}
[/cc]
こんな風にカンタンにWebFontは利用できますので、試してみてはいかがでしょうか？
