9

1月 14

 

CSSでの@font-face,つまりweb fontが使えない事でハマった件。

css-miami-desktop

どうもこんにちは!最近はとっても寒いですね。
しかも、新年からなんとなくイメチェンしたくて先輩のやってる美容室に行って
「なんか変わった感じにしてください」とお願いしたら、ものすごい刈上げをいただき、首元がスースーすごい!
第二次世界大戦時のドイツ男性みたいな髪型になりました。面白い!でも寒い!

近況報告はこのあたりにして・・・。

最近友人のホームページを製作中に、友人の提示するフォントをホームページ中に使って欲しいと言われました。
WEBフォントの事は大体知っていたので、「ああ、出来ると思うよ。出来る出来る。」と二つ返事で快諾したところまではよかったのですが。
もらったフォントはTTFファイルであるにも関わらず、ど~しても適用できない。
どこのリファレンスを見ても

@font-face{
  font-family:'testFont';
  src:url('FontFileName.ttf') format('truetype');
}

.test{
  font-family:testFont;
}

と書いたら適用できました!ワーイ!みたいな事が書いてあるのですが、自分のはそうはならない。
なんでー!!といろいろやりつつ結局ほぼ丸一日ハマってしまいました。(つらたん)

しかしとうとう、この問題を解決する事ができました。
問題はフォントファイルのタイプ、または状態にあったようです。

フォントファイルを変えて試してみようと思いたち、
こちらのサイトで変換しようとしてみたところ
this file is corruptedと(このファイルは腐ってる)言われてしまいました。
それで、こちらのサイトでTTFをWOFFに変換してみたところ、上手くいきました。

これを以って、

@font-face{
  font-family:'testFont';
  src:url('FontFileName.woff') format('woff');

.test{
  font-family:testFont;
}

と記述してみたところ、testクラスにフォントを適用することがようやく出来ました。
この状態でスマフォでサイトを確認してみると、フォントは適用されておらず(Sleipnir)、
改めてTTFをソースに追加しました。

@font-face{
    font-family:'testFont';
    src:url('FontFileName.woff') format('woff'), /* Modern Browsers */
    url('FontFileName.TTF')  format('truetype'); /* Safari, Android, iOS */
}

どうやら、.TTFファイルはiOSやAndroid、SafariでのWebfont適用を可能にし、
通常のモダンブラウザ(FF,Chrome)等で見るときは.WOFFという形式にしないといけないのではないのかな。と。

しかし僕の持っていたTTFフォントファイルはCorrupted認定されていた訳で、普通のTTFファイルなら問題なく表示出来ている物だったのかもしれません。

なにはともあれ、かくしてホームページに目的のフォントをスマフォ、PCのブラウザ両方に適用する事ができました。
この問題解決のいとぐちはこちらのWebparkさまから頂きました。
感謝いたします。

ここまで読んで頂いてありがとうございました。

では、また!

photo by: geirarne



2 Comments

  1. HARU より:

    全くのWP初心者で、1つずつ調べながらHPを作成しております。
    ずっとフォント変更ができず、放置していましたがおかげさまで解決しました。
    ありがとうございました!

コメントを残す

Pingbacks & Trackbacks

  1. 絶対WEBフォントの利用に役立つTIPS集〜ウェブフォントトラブル解決&設置のヒントまとめ | ウェブフォントファンブログ - Pingback on 2015/04/06