font-faceの罠

リニューアル1部終了の告知をしてから早一週間。

htmlはhtml5,cssはcss3で、これまでiphone、ipodtouchだと見にくかったHPを改善すべくレスポンシブで。

と考え、なんとなく現段階ではうまくいっていると思うのですが。

PCで見る文字とiphoneから見る文字の書式が違っているのが何時も引っかかっていました。

他のサイトを参考にしようと、そのサイトたちをPCとiphoneで見比べてみるとやっぱりうまく表示出来てる。

なぜ？と思い、ソースを見てみると、font-family設定が複数されているではないですか。

私はと言えば、sans-serifのみ。

考えてみれば、デバイスごとでOSが違うのだから、デフォルトのフォントも違う訳で、表示が異なるのも必然なわけですね。

ということで、以下サイトCSSでFont-Familyを指定するを参考に、各々のデバイスに合わせてゴシック書体で統一することにしました。（1部の0.5の修正かな？）



これで問題解決と思いきや、メニューと各ページのタイトルまでゴシック書体になってしまい、私が思い描いたイメージとは違ったものに。

どうしても何とかしたくて、ようやくwebフォントなるものを発見。

これで今度こそ！と期待して様々なサイトで紹介されているように以下のように記述したのに何の変化もないではないですか。



―最初の記述―【CSS】

@font-face{
font-family:'適当な書体名';
src:url('fonts/FontName.otf') format('otf');
}

.menu{
font-family: 適当な書体名;
}

何度確認してもCSSの記述に誤りはないようだし、自分でつけた”適当な書体名”に誤りもない、書体ファイルのリンク先も合っている。

otf形式だってFirefox 3.5で対応してるんだし、最新のFirefox44だって対応しているだろうと思いつつも、疑ってIE11とChrome48で見てみても変わらない。

検索して、コードを見つめること約10時間。



―最終の記述―【CSS】

@font-face{
font-family:'適当な書体名';
src:url('fonts/FontName.otf') format('otf');
src:url('fonts/FontName.ttf') format('ttf');
src:url('fonts/FoneName.eot') format('eot');
src:url('fonts/FontName.woff') format('woff');
}

.menu{
font-family: 適当な書体名;
}

上記のように記述したら反映してくれました。

結局、問題は最後に疑っていたファイル形式だったようです。(ダウンロードできるファイル形式は大抵otfだったのに……)


後になって考えてみると、こんなにも些細なことに時間を費やしたことに悔しい限りですが。

htmlとかcssとかの記述って、一つ何かに躓いて、考えてクリアしての繰り返しだなと最近思います。

分からないことが多いからこんな状態ですが、経験が増えることで、考え悩むことで自分のものになっているのだと信じたいです。



※今回は備忘録として――