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

###前提・実現したいこと
webフォントをローカルで反映させたいです。

###発生している問題・エラーメッセージ

ローカルで、webフォントがIE・chrome・opera・firefoxで反映されません。

###該当のソースコード
@font-face{
font-family: "test-font01";
src:url("/MakibaFont13/MakibaFont13.eot");
}

@font-face{
font-family: "test-font01";
src:url("/MakibaFont13/MakibaFont13.ttf") format("truetype");
}

body{height: 100%;font-family:"test-font01"
;font-size: 14px;}

すみません逆になってしまいました。写真も編集もお粗末で申し訳ありません。

###試したこと
フォント名変更・webフォントの変更・フォントキャッシュ削除・反映箇所変更

###補足情報(言語/FW/ツール等のバージョンなど)
初心者です。
更新をクリックすると反映したい部分が反応しているのですが、フォントは全く変わりません。サイズなどは変わります。cssでも＠fontfaceは有効になっています。
適応範囲はbodyにかけたり特定の文字にかけたり…様々やってみましたがどれも反映されません。
どの文字でも反映されず、sans-serifになります。(第二候補にwebフォント以外を指定するとその文字になります。)
文字自体は開けるのでファイルが壊れていないと思います。(eotは開くアプリがないので確認できませんでした。)
fontファイルでも同じようにやりましたがうまくいきませんでした。
独自ドメインは持っていません。xdomeinの無料サーバーを使用しています。転送はFFFTPです。
宜しくお願い致します。

＜追記＞
アップロードしたところ、そちらでは反映されました。
ですが、できればローカルで確認したいです。
よろしければ、ローカルでの反映方法が知りたいです。
宜しくお願い致します。

kei344

2016/08/30 19:00

cssの記述は書かれている部分だけですか？

order-last

2016/08/31 06:26

適応範囲の指定はしました。

kei344

2016/08/31 06:46

URLにhttpから始まるフルパスを使っても同じですか？

order-last

2016/08/31 09:37

出ませんでした。そのURLを検索にかけると出るのですが…

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

回答3件

ローカルで出来ない理由がわかりませんが、たぶんパスの問題だとは思います。フォントファイルだけ先にアップロードして、フォントファイルの指定にはそのパスを指定すれば使えるとは思うのですが･･･。

【Webフォントを指定するには？ - @font-faceの解説 - CSS3リファレンス】
http://css3.sophia-it.com/reference/Webフォントを指定するには？

【【css】Webフォント、ローカルフォントの指定方法 at softelメモ】
https://www.softel.co.jp/blogs/tech/archives/3676

【実はすごく簡単！webフォントの使い方＆日本語対応webフォントまとめ | Web制作会社スタイル】
http://www.hp-stylelink.com/news/2013/08/20130829.php

以下は私がよく使う書き方です。（もうさすがに woff だけに絞っても問題ないかとは思いますが）

CSS
1/* fonts.css */
2@font-face {
3	font-family: 'myfont';
4	src: url('http://example.com/font/myfont.eot?#iefix') format('embedded-opentype') /* IE6～IE8 向け */
5	   , url('http://example.com/font/myfont.woff') format('woff') /* 主要最新ブラウザ向け */
6	   , url('http://example.com/font/myfont.ttf') format('truetype') /* IE以外の旧ブラウザ向け */
7	   , url('http://example.com/font/myfont.svg#svgId') format('svg'); /* モバイル等その他のブラウザ向け */
8}

CSS
1/* styles.css */
2html {
3	font-family: myfont, sans-serif;
4}

また、truetype は woff にツールで変換できます。

【フォント拡張子を変換してくれるサイト3つ +α 【ttf otf bin svg pfb dfont afm woff】 | Q＆A Oh My God！】
http://qaomg.com/?p=22

【TrueTypeフォントからOpenTypeフォントへの変換方法 | OpenTypeフォントエディタなら OTEdit】
http://opentype.jp/ttf2otf.htm

投稿2016/08/31 15:41

kei344

総合スコア69398

こちらのコードで試してみました。
実際はCSSの記述位置や適用範囲が違うかと思いますが、参考程度にご覧ください。

フォント読み込み部分の先頭を「/」から「./」もしくは「/」の記述なしで読み込めました。

ただ、私の環境ではEOTファイルがなくフォント変換サービスも日本語には対応していなかったので、
IEでの確認は英文のみです。

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face{ 
    font-family: "test-font01"; 
    src:url("MakibaFont13/MakibaFont13.eot"); 
    }
   @font-face {
      font-family: "test-font01";
      src:url("MakibaFont13/MakibaFont13.ttf") format("truetype"); 
    }
    
    body { font-family: "test-font01", serif }
  </style>
</head>
<body>
  <p>
  This is MakibaFont.<br />
  まきばフォントで書かれています。
  </p>
</body>
</html>

追記
質問に記載されていたCSSをコピーし、「/」を抜いただけのものでテストしてみました。
以下の内容だけのHTMLをテスト用のファイルとして作成し、どうなるか確認していただけますか？
もしこれが動けば、現在のCSSの読み込みやHTMLの書き方に何か問題があるかもしれません。

ファイル階層

index.html
MakibaFont13（フォルダ）

-- MakibaFont13.ttf
-- MakibaFont13.eot

html
1<html>
2<head>
3  <title>Web Font Sample</title>
4  <style type="text/css" media="screen, print">
5@font-face{ 
6font-family: "test-font01"; 
7src:url("MakibaFont13/MakibaFont13.eot"); 
8}
9
10@font-face{ 
11font-family: "test-font01"; 
12src:url("MakibaFont13/MakibaFont13.ttf") format("truetype"); 
13}
14
15body{height: 100%;font-family:"test-font01" 
16;font-size: 14px;}
17  </style>
18</head>
19<body>
20  <p>
21  This is MakibaFont.<br />
22  まきばフォントで書かれています。
23  </p>
24</body>
25</html>

投稿2016/08/31 00:02

編集2016/08/31 07:05

dit.

総合スコア3235

order-last

2016/08/31 06:25

ほぼ同じ形で記述し試してみたのですが、4つのプラウザがどれも反映されませんでした。先頭を「./」と「/」なしでやった場合も同様です。パソコン自体に問題があるのでしょうか…？

dit.

2016/08/31 07:08

回答に追記しました。一度別ファイルで試してみていただけますか？ローカルでもサーバー上でもかまいません。上書きされないように「index.html」以外のファイル名で大丈夫です。

order-last

2016/08/31 10:03

別ファイルで試しました。＜chrome＞ This is MakibaFont. 縺ｾ縺阪�繝輔か繝ｳ繝医〒譖ｸ縺九ｌ縺ｦ縺�∪縺吶� ＜IE＞ This is MakibaFont. 縺ｾ縺阪・繝輔か繝ｳ繝医〒譖ｸ縺九ｌ縺ｦ縺・∪縺吶� ＜firefox＞ This is MakibaFont. まきばフォントで書かれています。＜opera＞ This is MakibaFont. 縺ｾ縺阪�繝輔か繝ｳ繝医〒譖ｸ縺九ｌ縺ｦ縺�∪縺吶� となりました。 webフォントにはすべてなっていない状態で、firefox以外は日本語が文字化けしました。英語はすべて出ました。

dit.

2016/08/31 23:46

サンプルのコードはかなり削って書いてしまったため、文字化けに関してはMETAで文字コードを指定すれば直るかもしれません。（どちらにしろ英語（アルファベット）も適用されていないのでダメですね。）公開予定日以前にアップしたくなければ、kei344さんの回答の通りフォントファイルのみ先にサーバーにアップ、URLフルパスでフォントファイルを指定したCSSをローカルで試してみてください。

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

すみません。サーバー上では解決しました。
ローカルでは全く反映されなかったのですが、アップロードし、URLで検索をかけた所、無事webフォントで表示されました。
ローカルでは反映されないものだったのでしょうか…
公開日が決まっているホームページなのであまりアップしたくはありません。
ローカルで反映させる方法がありましたら教えて頂きたいです。

ちなみに、アップロード時はURLをフルパスで記載した場合のものでした。

Kei344様、dit.様、
沢山検討していただき、本当にありがとうございます。

投稿2016/08/31 10:18

編集2016/08/31 10:35

order-last

総合スコア10