WEB ARRANGER Webアレンジャー

WEB ARRANGER – 横浜のWeb制作会社に勤務して10年目ぐらい。今思えば、大したデザインもしてないしクリエイトもしてなく、アレンジしてるだけだよな、と開き直った人間の備忘録としてのブログ

10月2013

今さらながらWebフォントの凄さを知った

今さらWebフォントの重要性に気づきました。
というのも、初めて使用したのが確か2011年3月で、震災のあった時に受注していた英語サイトでした。
その頃はcufon.jsなるものを用い、変換等に手間がかかる上、流石のIE様は表示されるときに一瞬「!?」となってから表示されました。
当時いた会社はIE至上主義でしたので、その英語サイトで使用して以来、使う機会はありませんでした。

2013年に転職し今の会社では、見出しに英語を用いてもOKみたいな風潮でしたのでバリバリ使ってやろうと。

使用法は簡単で、使いたいtrue typeフォントを用意してEOT FASTをダウンロードし、eotファイルに変換する。
そしてCSSにて以下のように指定する。

@font-face {
  font-family: Forum;
  src: url("../images/Forum-Regular.eot");
}
@font-face {
  font-family: Forum;
  src: url("../images/Forum-Regular.ttf") format("truetype");
}
h2 {
  font-family: 'Forum';
  text-transform: uppercase;
  font-size: 60px;
  font-weight: normal;
  letter-spacing: -2px;
}

すると、以下のような感じへ(画像)

簡単だったとはいえ、EOT FASTをダウンロード、解凍後、exeファイルを何度クリックしてもインストールできず、参りました。

正しくは、
1.解凍したEOT FASTのフォルダに変換したいttfファイルを移動する(移動しないとできない)
2.ttfファイルをチーターのようなネコ科の猛獣のアイコンのexeファイルの上にドラッグして重ねる
3.変換成功! です。なかなか気が付きませんでした。

簡単だったので、このブログ内のArialで誤魔化していた見出しやナビゲーションを Zurich Bold Condensed に変えました。

—-
2014/3/07 追記
EOT FASTで変換したeotがIEで表示されてないことが判明しました・・
以下のサイトで変換し、解決しました。

Create Your Own @font-face Kits

表示確認用のHTMLファイルも付いたzipのセットでダウンロードでき、至れり尽くせりです。

↓英語フォントなら、ある程度はこれで事足りるのでは。いつの間にか5版になってる

2013/10/27 08:36 | カテゴリー:blog