CSS
HTML5
Chrome
font

初心者だけどwebアプリを作りたい!その2 〜フォント地獄〜

More than 1 year has passed since last update.

フォント地獄

あるいは、chromeの罠

前回webフォントを適用できるのかというところで終わっていましたが、結論から言うと適用できてません(現在進行形)
いや、適用自体はできたんですけどおもったような挙動をしてくれないというか

そもそもローカルでフォントがちゃんと適用されているのか?と思って試してみました。
だめでした。

Failed to decode downloaded font:
OTS parsing error: post: Bad post version 0

延々↑こんなエラー?警告?が出ます。
調べてみてもGitでフォントファイルを扱っているとフォントファイルが破損することがあるという情報ばかり出てきます
いやGitでフォント管理してないよ!!!

その後なんやかんや試してみてどうやらChromeでようじょふぉんとを使った場合のみフォントが読み込まれていないということがわかります。
で、けっきょくこちらの情報をみてフォントファイルをwoffに変換したら適用されました。されたんですが…

フォント指定部分のCSSを外部CSSにするとフォントが読み込まれません。(←今ココ)
Htmlに直接書き込めば適用されます。
でも外部CSSにするとだめです。
フォント以外のスタイル指定はちゃんと効いているのでCSS自体は読み込まれているようです。
Chromeのデベロッパーツール上でもフォントファイルが読み込まれていないのでフォントだけがだめみたい

さあどうしたものか…

関係ないけど最終的にやりたいこととか

・ガチャ結果を画像ツイート
・ガチャ結果からwikiのキャラ個別ページにリンク
・ガチャ演出(レア確定演出みたいなの)
・ほかにあったら追記