FF風フリーフォント『Ferrum』をWebフォント化しちゃった
FINAL FANTASYのロゴをモチーフに作られたフリーフォント『Ferrum』が、CC0(著作権放棄)だったので、Webフォント化してみました。
というのも、前回、
こちらの記事で紹介した、このフォント、相当気に入ってしまったので、このブログに取り入れよう!ってことで、新ロゴに取り入れてみました。
そうです、デザインをリニューアルしたのです。
いろいろこだわってて、CSS見ればわかると思いますが、初心者コーダーが見たら泣きそうになるくらい細か~く、余白の指定をしています。
ま、どーでも良いですね!それでは本題!
早速Webフォントとして埋め込んでみよう
まず、「そもそもWebフォントってどうやって使うの?メリット・デメリットは?」って人は、
このあたりの記事をチェケラしておいてください。
で、ブラウザ・環境によってフォントの形式が対応してなかったりするので、変換とか、地味に面倒なんですよね。
で、この『Ferrum』が、自由に再配布等してオッケーなフォントだったので、フォントキットを配布します。zipファイルです。
こいつをダウンロードし、好きな場所に配置したら、スタイルシートに、
@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フォントに変換するのはこちらを参考にしました。
ドットコロン様に感謝を
こちらのフォントを開発した、ドットコロンというサイトに、感謝したいと思います。フリーなので、サイト記載の義務は無いですが、紹介しておきます。ありがとうございます!
Ferrum以外にも、美しい英字フォントがたくさんありますよ!
では。
- 2015-01-25
- フォント
ご一緒に、Related Post はいかがですか?
- FINAL FANTASYロゴ風フリーフォントにグッと来た!(商用利用可)
- font-familyが決まんない!
- 「名刺」ならぬ「名ピ」をデザインしてみた
- Photoshop(CS5)でバッチ処理をすると強制終了しやがる!しかも…
- 意外と知らない?Dreamweaverの隠れ便利機能
コメントを残す