IEにてホームページを閲覧時、CSSのローカルフォントが適用されない。

Question

###前提
現在ホームページを制作しています。
その中でCSSの@font-faceを用いて、ローカルに保存してあるフォント（はんなり明朝体）を使おうと思っていたのですが、IEのみうまく反映されません。chromeとfirefoxでは問題なく反映されているのですが解決策をご存じの方がおられましたら、ご教授いただけませんでしょうか？

###発生している問題・エラーメッセージ
IEにてホームページを閲覧した際、@font-faceで指定したローカルフォントが適用されない。

###該当のソースコード
【言語：CSS】
@font-face {
font-family: 'hannari';
src: url("../fonts/Hannari.otf") format('opentype');
}

@font-face {
font-family: "hannari";
src: url("../fonts/Hannari.eot");
}

body {
font-family: "hannari;
}

###試したこと

• IE用にeotファイルを作成し使用
• HTMLの『head』内に、

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>を追加。（削除してもだめでした。）

• xamppでサーバー環境をつくってテスト

###補足
フォントのURLの指定が間違っていないことは確認しています。
以上、よろしくお願い致します。

###修正点
ご回答をいただいた方よりご指摘があったため、追記致します。
IE8以降のバージョンに対応したいと考えています。
それが難しいようであれば、IE9かIE10からでも問題はありません。

Comments

[maisumakun]

対応させたいIEの最低バージョンはいくつですか？

[dit.]

IE用にeotファイルを作成しとありますが、どのように作成しましたか？webでの変換サービスだと日本語対応していない場合もあります。

[susususu]

>>maisumakun 様

ご回答ありがとうございます。
質問の方も修正してまいりましたが、できればIE8以降に対応したいと考えています。
それが難しければ、IE9、10以降でも問題はありません。

[susususu]

>>dit. 様　ご回答ありがとうございます。海外のウェブサービスで変換したところ、極端にデータ容量が少なくなったため、dit.様の仰る通り日本語に対応していないということが頭をよぎり国内のウェブサービスにて変換を行いました。すると、元ファイルと同じくらいのデータ容量になったためおそらく問題はないかと思いそのままファイルを使用している状況です。

Answer 1

武蔵システムのWOFFコンバーターを使い変換しようとしたところ、
「ポストスクリプト形式のOpenTypeフォントのため、EOTファイルは作成されません」との警告が出ました。

IE9以降対応でよければWOFFにしていただいた方がよいかと思います。
修正依頼でmaisumakunさんが気にかけているのはこの部分ではないでしょうか。
バシャログ。各ブラウザのWeb フォント対応状況

Comments

[susususu]

dit.様
ご回答ありがとうございます。
WOFFコンバーターを使用してフォントの変換を行い、ご指摘いただいたとおり試してみたところフォントが適用されました！！！！ありがとうございます！！
あまりにもあっさり解決したので昨日寝る間を削って３時間近く悩んでいた自分が恥ずかしく思えます…
IEだからeotじゃないと…、と自分の中で勝手に決めつけてしまっていました。

本当にありがとうございました。
また機会がありましたら、何卒よろしくお願いいたします。

[dit.]

解決したようで安心しました。
「絶対にeotじゃないといけない」という状況なら別ですが、意外と別の道からあっさり解決したりするものです。
以前このような回答をしたことがあったので、できるかな…と思って回答させていただきました。
「webフォントがIEだと反映されません　https://teratail.com/questions/65905　」

Answer 2

ローカルのフォントって
src: local('なんとか')
src: url("file:///C:/Windows/Fonts/なんとか.ttf")
な感じかなって思ってたら、まんまこれじゃないんですか？

webフォントのローカルでの反映方法が分かりません。

Comments

[maisumakun]

URL指定を考えれば、「ローカルに保存してあるフォント」は「サーバにローカル」なフォントで、「PCのローカルな」フォントではないと思ったのですが、どうでしょうか。

[dojikko]

いや だから「な感じかなって思ってたら」って書いてます
日本語って難しいな
少なくとも私はサーバーに置いてあるフォントをローカルに保存してあるフォントとか言わないので..

[susususu]

dojikko 様
ご回答ありがとうございます。
申し訳ありません、maisumakun様の仰る通り、「サーバにローカルなフォント」という意味で使いました。ウェブ制作に関して完全に独学であるため、他にどういえばいいのか言葉がわからないもので…
混乱させてしまい大変申し訳ないです。もう一度きちんと勉強し直します。