カテゴリー: ウェブ制作

タグ:Webフォント(2)  

設定した日本語Webフォントが上手く表示されない

以前、依頼されたウェブサイト制作で見出しを明朝体にしようとなった時の話。

Webフォントを使用する事になったので、手元にあるotf形式のフォントファイルを早速、https://www.fontsquirrel.com/tools/webfont-generatorでwoffに変換。
サーバーに設置して、、、font-familyを設定して、、、見出しにWebフォントを指定、、、
ちゃんと設定できているか確認。。。

見出し文字がバグる!!
なんでやねん!!

すぐに原因を探る。CSSの書き間違いかな?
しかし、どうもフォントの指定には問題がない様子。

数分間格闘し、ようやく原因発見。
どうやら先ほど使用したhttps://www.fontsquirrel.com/tools/webfont-generatorに原因が。どうも日本語フォントの様なデータ量の大きいファイルの変換には一部対応していないようなのです。
様々なファイル形式に変換してくれる、とても優秀なサービスなので油断してました。。。

というわけで、http://opentype.jp/woffconv.htmを使用し、otfファイルを再度、woffファイルに変換。
今回はうまくウェブフォントが表示されました!

2016.11.01

Twitterでつぶやく

Facebookでシェアする

実験中→ いいね: ツイート: -

TOP