[み]WebFontとして使えるフリーの日本語フォント

WebFontの便利さについては重々承知しておりますが、いかんせん私みはら(@masashi_385)は日本人なもので、英字フォントだとなかなか使いどころを見つけられていませんでした。というか、WebFontとして使える日本語フォントとか、じつはあるんじゃねーの?と思って調べてみたら、すばらしいまとめを見つけました。

WebFonts として利用できるフリーの和文フォント | ヨモツネット

見事ですね。カンペキです。ありがとうございます。

もはや、今回はこれで終了なカンジですが、どうせなので、WebFontの使い方を紹介します。GoogleのWebFontの使い方は前にも紹介しましたので、こちらもどうぞ。

フリーの日本語フォントをWebFontとして使う方法

フォントをダウンロード

まずは、先ほどのヨモツネットさんの記事を参考に、WebFontとして使いたいフォントをダウンロードします。今回は「あんずもじ」を例にします。あんずもじについてはこちらをどうぞ。

あんずいろapricot×colorフリー写真素材・手書きフォント・人物写真素材

ダウンロードしたファイルを解凍すると、大抵はTTF形式のフォントファイルになっていると思います。このままでもいいんですが、IEにも対応させたいというときには、TTF形式からEOT形式に変換してやらないとダメなんです。TTF形式のフォントファイルをEOT形式に変換するにはこちらをどうぞ。

ttf2eot

フォントをサーバにアップロード

WebFontとして使いたいファイルが準備できたらサーバにアップロードします。WordPressであれば、テーマフォルダにいれるといいんじゃないでしょうか?みはら.comだったらここですね。

http://miha5.com/wp-content/themes/miha5/

いや、別にどこにアップロードしたっていいんですけど、テーマとしてまとめておいたほうが、リニューアル時とかにスッキリすると思いますよ。

[email protected]

[email protected][email protected][email protected]WebFontとして使えるようになります。

/* Firefox, Opera, Safari */
@font-face {
    font-family: APJapanesefont;
    src: url(APJapanesefont.ttf) format("truetype");
}
/* IE */
@font-face {
    font-family: APJapanesefont;
    src: url(APJapanesefont.eot);
}

そして、あとはWebFontを適用したいところで、font-familyを指定すれば完了です。

h1 {
    font-family: APJapanesefont;
}

こんな風にカンタンにWebFontは利用できますので、試してみてはいかがでしょうか?

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup