フォントHelveticaで作成されたサイトはInternet Explorerで表示されない！？

CSSのフォント指定で「Helvetica」を指定した際に、そのサイトをIEで表示できないという致命的なバグがあるようです。

普段、IEなんて使いませんが、たまたまある案件でIEを使用する事がありました。いろんなサイトを何となく閲覧してまわっていたのですが、とあるサイトが表示されないという問題にぶつかりました。

例えば以下のサイトが閲覧できません。
恵比寿美容室|HELVETICA hair
※あくまで1例です。個人的にもお仕事的にも関連はございません。

「。。。の表示中に問題が発生したため、Internet Explorer は互換表示を使用して Web ページを更新しました。」
というエラーメッセージが表示され、背景や一部画像は表示されますが、テキスト文字は一切表示されません。

また、たまたまはてなブックマークサイトを見ていたら同件の記事をみかけました。
IE9, IE10が抱えるHelvetica問題について初めて知った件 | IDEA*IDEA

問題が発生する原因について

問題が発生する条件としては2点です。

ひとつはサイトのCSSのフォント指定で、先頭にHelveticaを設定していることです。
例えばこのように。

font-family: "Helvetica","Arial";

もう1点は、閲覧する側で、Helveticaフォントをインストールしてある状態で、IEで閲覧した場合です。
私のPCの場合、仕事で使用するのでHelveticaフォントがインストール済み状態でした。また、IEのバージョンは9ですが、参考サイトによるとIE10でも改善されていないようです。

問題の解決方法としては、サイト側でフォント指定を調整することです。

font-family: "Arial","Helvetica";

font-family: "Arial";

上記のように、Helveticaを先頭で指定しないようにするか、指定から外すようにします。

もう一つ、閲覧側での解決方法ですが、IEのメニューからインターネットオプションを表示して、「全般」タブの「ユーザ補助」を開きます。

そこで「Webページで指定されたフォントスタイルを使用しない」にチェックを入れます。
これでひとまずサイトは表示されるようになります。

サイトを運営する側からすれば、ページを見る事ができない人を少しでも減らしたいと思うところでしょう。
そういった意味でも、根本的な対策としてサイトのフォント指定を調整する必要があると思います。

それにしても、以前から知っている人は知っていたこのバグ、最新のブラウザIE10になっても改善されていないというのはかなり致命的なような気がします。

posted : 2013.10.07