HTML & CSS

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

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

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

最近友人のホームページを製作中に、友人の提示するフォントをホームページ中に使って欲しいと言われました。
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さまから頂きました。
感謝いたします。

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

では、また!

[linux] でSSHを用いて他ホストに接続する設定をファイルに保存する方法。ブックマーク的な。前のページ

PreprosのCustom Rubyを使うことでGumbyコンパイルエラーを解決次のページ

コメント

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

最近の記事

Twitter

PAGE TOP