FINAL FANTASYのロゴをモチーフに作られたフリーフォント『Ferrum』が、CC0(著作権放棄)だったので、Webフォント化してみました。

というのも、前回、

• FINAL FANTASYロゴ風フリーフォントにグッと来た！(商用利用可)

こちらの記事で紹介した、このフォント、相当気に入ってしまったので、このブログに取り入れよう！ってことで、新ロゴに取り入れてみました。

そうです、デザインをリニューアルしたのです。

いろいろこだわってて、CSS見ればわかると思いますが、初心者コーダーが見たら泣きそうになるくらい細か～く、余白の指定をしています。

ま、どーでも良いですね！それでは本題！

早速Webフォントとして埋め込んでみよう

まず、「そもそもWebフォントってどうやって使うの？メリット・デメリットは？」って人は、

• 実はすごく簡単！webフォントの使い方＆日本語対応webフォントまとめ

このあたりの記事をチェケラしておいてください。

で、ブラウザ・環境によってフォントの形式が対応してなかったりするので、変換とか、地味に面倒なんですよね。

で、この『Ferrum』が、自由に再配布等してオッケーなフォントだったので、フォントキットを配布します。zipファイルです。

• ferrum-webfont-kit

こいつをダウンロードし、好きな場所に配置したら、スタイルシートに、

@font-face {
font-family: 'Ferrum';
src: url('ferrum-webfont.eot');
src: url('ferrum-webfont.eot?#iefix') format('embedded-opentype'),
url('ferrum-webfont.woff2') format('woff2'),
url('ferrum-webfont.woff') format('woff'),
url('ferrum-webfont.ttf') format('truetype');
font-weight: normal; font-style: normal;
}

こんな感じで記述します。↑の記述だと、cssファイルと同じ階層にフォントファイルを置いてある体になってます。

そしたら好きな場所のfont-familyを、Ferrumにしてやります。

h1 {
font-family: 'Ferrum';
}

例えばこんな感じ。これで完了！

ちなみに手持ちのフォントファイル(ttfとかotfとか)をWebフォントに変換するのはこちらを参考にしました。

• 手持ちのフォントをWEBフォント用に一括変換してくれるサービス

ドットコロン様に感謝を

こちらのフォントを開発した、ドットコロンというサイトに、感謝したいと思います。フリーなので、サイト記載の義務は無いですが、紹介しておきます。ありがとうございます！

Ferrum以外にも、美しい英字フォントがたくさんありますよ！

では。