ブログに好きなフォント(文字の種類)を使ってみる

以前からダウンロードしていてフラッシュなどに使わせてもらっていたお気に入りの「ふい字フォント」ですが、規約を良く見たら・・・

・個人/商用/オンライン/オフラインかかわらず、好きに使ってやってください。
　報告等もとくには不要です。素材、ＨＰなどへの使用もご自由に。
・商用の映像についても上記同様、フリーでお使いいただけます。
・ゲームなどでのフォントの同梱や埋め込みの場合、再配布となりますが、
　事前のお知らせは結構ですので、ご自由にお使いください。
・お使いの際の、当サイトのフォントの著作表記は必須ではありません。
・原型を留める範囲でしたら（輪郭を滑らかにする、中抜き、太らせるなど）、
　フォント画像の加工もご自由にどうぞ。

という太っ腹な内容ではないですか！

日本語のフォントって作るの物凄く大変なんですよね。
しかもこのようなハイクオリティなものだと、かなりの労力を要したのではないでしょうか。
ソレを無償でここまでゆるいライセンスで配布するとは、本当に頭が下がります。

というわけで、この素晴らしいふい字フォントをブログに使ってみよう！と思い立ちました。

madtag

ふい字フォントの置き場はここです。

他にも「まきばフォント」や「おひさまフォント」などの素晴らしいフォントがダウンロードできます。
感謝しつつ、ダウンロードしましょう。
※作者の方には質問は一切しないでください。迷惑がかかります。

このフォントをブログに使ってみよう！ということで、作業開始です。
まず、ダウンロードしたファイルを解凍すると「HuiFontP29.ttf」というファイルがでてきます。
これがこのフォントの本体です。
このフォントが標準でどのPCにも入っているものだったらCSSでfont-familyを指定すればいいだけなんですが、この場合webフォントという技術を使って閲覧者に自動的にフォントをダウンロードしてもらう必要があります。

こちらを参考に作業しました。
http://ascii.jp/elem/000/000/465/465458/

まず、オバカちゃんなインターネットエクスプローラの為に、通常ttfという形式のフォントファイルをeotという妙な形式に変換しないといけません。

http://ttf2eot.sebastiankippe.com/
こちらにアクセスし、まず「ファイルを選択」から「HuiFontP29.ttf」を選択し「convert to eot」をクリックします。
暫く待つと、eot形式に変換されたフォントがダウンロードできます。

次に、「HuiFontP29.ttf」と、先ほど作成したeotファイルをサーバーにアップロードします。
サーバーをお持ちで無い方は、安くて高機能な　ロリポップ！を強くオススメします。
正直、無料サーバーは制約がとても多いし機能が劣るので使う気がしないんですよね・・・。

まぁ、そこは個人個人にお任せするとして、ファイル二つを適当な場所にアップロードしたら、フリープラグインに以下のように書き加えます。

<style type="text/css">
/*IE*/
@font-face{
font-family:huiji;
src: url(アップロードしたeotファイルのURL);
}

/*モダンブラウザ(IE以外)*/
@font-face{
font-family:huiji;
src:url(アップロードしたttfファイルのURL) format("truetype");
}

/*このフォントをメインカラムに適用*/
#main{/*もし全体に適用するならhtml body{と書く*/
font-family:huiji;
}</style>

アメブロのCSSは@が使えませんので、フリープラグインに書くしかありません。

これで完成です！
簡単でしょ？

注意！

これは一応どのフォントでも可能ですが、フリーフォントを使う場合はライセンス(利用規約)を必ず確認してから使いましょう。
無断でアップロードするのを禁止している作者さんも多いです。

それでは、良いアメブロライフを！