WebFontの便利さについては重々承知しておりますが、いかんせん私みはら（@masashi_385）は日本人なもので、英字フォントだとなかなか使いどころを見つけられていませんでした。というか、WebFontとして使える日本語フォントとか、じつはあるんじゃねーの？と思って調べてみたら、すばらしいまとめを見つけました。
WebFonts として利用できるフリーの和文フォント | ヨモツネット
見事ですね。カンペキです。ありがとうございます。
もはや、今回はこれで終了なカンジですが、どうせなので、WebFontの使い方を紹介します。GoogleのWebFontの使い方は前にも紹介しましたので、こちらもどうぞ。
フリーの日本語フォントをWebFontとして使う方法
フォントをダウンロード
まずは、先ほどのヨモツネットさんの記事を参考に、WebFontとして使いたいフォントをダウンロードします。今回は「あんずもじ」を例にします。あんずもじについてはこちらをどうぞ。
あんずいろapricot×colorフリー写真素材・手書きフォント・人物写真素材
ダウンロードしたファイルを解凍すると、大抵は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は利用できますので、試してみてはいかがでしょうか？
