RUIN OF THE WEB DESIGNER

Webデザイナーの成れの果て

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以外にも、美しい英字フォントがたくさんありますよ!

では。

ご一緒に、Related Potato はいかがですか?

コメントを残す

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

CAPTCHA


This blog is kept spam free by WP-SpamFree.