css @font-faceでフォントが反映されない

基本的な質問で申し訳ありませんが、どうしても解決したいので知恵をお貸しいただければと思います。

以下がソースコードの一部です。
CSS style.css
@font-face {
font-family: "jlei00m";
src: url("./font/jlei00m.eot?") format('eot');
src: url("./font/jlei00m.woff") format('woff'),
url("./font/jlei00m.ttf") format('truetype');
}
div#wrapper{
font-family: "jlei00m";
}
div#wrapperでbodyタグの1階層下の全体を囲っています。
WordPressを使っており、指定のフォントを使いたいのですが反映されません。

「font」というフォルダの中に「jlei00m.woff」「jlei00m.ttf」「jlei00m.eot」という３つのファイルがあります。

現在[Mac OS Sierra バージョン10.12.2] を使っています。

Safariでは正常にフォントが反映されていますが、

GoogleChrome,Firefox,IEではブラウザごとのフォントで表示されています。

エラー表示
GoogleChrome
Failed to decode downloaded font: http://konjyaku-no-tamatebako.com/wp-content/themes/konjaku-no-tamatebako/font/jlei00m.woff
OTS parsing error: cmap: entry selector != log2(segement count) (11 != 12)
Failed to decode downloaded font: http://konjyaku-no-tamatebako.com/wp-content/themes/konjaku-no-tamatebako/font/jlei00m.ttf
OTS parsing error: cmap: entry selector != log2(segement count) (11 != 12)

Firefox
downloadable font: cmap: entry selector != log2(segement count) (11 != 12) (font-family: "jlei00m" style:normal weight:normal stretch:normal src index:0) source: http://konjyaku-no-tamatebako.com/wp-content/themes/konjaku-no-tamatebako/font/jlei00m.woff
downloadable font: cmap: failed to parse table (font-family: "jlei00m" style:normal weight:normal stretch:normal src index:0) source: http://konjyaku-no-tamatebako.com/wp-content/themes/konjaku-no-tamatebako/font/jlei00m.woff
downloadable font: rejected by sanitizer (font-family: "jlei00m" style:normal weight:normal stretch:normal src index:0) source: http://konjyaku-no-tamatebako.com/wp-content/themes/konjaku-no-tamatebako/font/jlei00m.woff
downloadable font: rejected by sanitizer (font-family: "jlei00m" style:normal weight:normal stretch:normal src index:1) source: http://konjyaku-no-tamatebako.com/wp-content/themes/konjaku-no-tamatebako/font/jlei00m.ttf

とコンソールに表示されています。

ファイルが破損しているのかと思い2回変換しましたが何も変わりません。

どうしても解決したい問題なので、お願いします。

P.S.
もし情報が足りないようであれば補足で付け足しますので、ご回答よろしくおねがいします。

kei344

2017/01/16 08:37

質問文のコード／エラー文はそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

7968

2017/01/16 09:34

jlei00mで調べると「AR隷書体M」が出てきますが、利用したいフォントはこちらでしょうか。上記のフォントなら、Webフォントとして提供しているという記述が見当たりませんが、自分のパソコンにインストールされたフォントデータをアップロードして利用したいということでしょうか。

pran

2017/01/17 04:51

7968様 AR隷書体Mはおっしゃる通りWEBフォントとしての提供はないようですので、サーバーにアップロードしそれをサイト訪問者のPCにインストールして使う@font-faceを使っているのですが、@font-faceで記述したとしてもWEBフォントでの提供がなければ使えないのでしょうか？

行動規範の内容に同意します

回答3件

WEBフォントでの提供がなければ使えないのでしょうか？

上記に関して試したことはないため、表示可能かどうかわかりません。
識者の方の回答をお待ちください。

別の視点になりますが、フォントのライセンスについて気になります。
フォントをWeb上で使用できるかはフォント提供元のライセンスによるかと存じます。
私も詳しくはありませんが、フォントデータをアップロードして使うという方法を許諾しているところはないのではないかと思います。
まずは、フォント提供元にフォントデータをアップロードして利用しても問題ないか確認されるのが良いかと存じます。
（そもそも、フォントデータをアップロードして利用するという方法ができないかもしれませんが...）

どうしても、そのフォントを使いたいなら、画像またはSVGにして利用する方法が良いと思います。
（そもそも、ライセンスによっては、Web上では使用してはいけないと決めているところもありますが...）

別のフォントでも良いならWebフォントとして提供されているサービスを利用することをお勧めします。
グーグルなら「Google Fonts + 日本語」、モリサワなら「TypeSquare」というサービスがあります。
上記のようなサービスで提供されているフォントから似たようなフォントを探して使うという方法もあります。
利用する際は、各サービスの利用規約をご一読の上、ご利用ください。

投稿2017/01/17 06:26

編集2017/01/17 06:37

7968

総合スコア253