質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.08%

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

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 12K+

order-last

score 10

前提・実現したいこと

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です。
宜しくお願い致します。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/31 04:00

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

    キャンセル

  • order-last

    2016/08/31 15:26

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

    キャンセル

  • kei344

    2016/08/31 15:46

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

    キャンセル

  • order-last

    2016/08/31 18:37

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

    キャンセル

回答 3

+1

こちらのコードで試してみました。
実際は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>
<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{height: 100%;font-family:"test-font01" 
;font-size: 14px;}
  </style>
</head>
<body>
  <p>
  This is MakibaFont.<br />
  まきばフォントで書かれています。
  </p>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/31 15:25

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

    キャンセル

  • 2016/08/31 16:08

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

    キャンセル

  • 2016/08/31 19:03

    別ファイルで試しました。

    <chrome>
    This is MakibaFont.
    縺セ縺阪�繝輔か繝ウ繝医〒譖ク縺九l縺ヲ縺�∪縺吶€�

    <IE>
    This is MakibaFont.
    縺セ縺阪・繝輔か繝ウ繝医〒譖ク縺九l縺ヲ縺・∪縺吶€�

    <firefox>
    This is MakibaFont.
    まきばフォントで書かれています。

    <opera>
    This is MakibaFont.
    縺セ縺阪�繝輔か繝ウ繝医〒譖ク縺九l縺ヲ縺�∪縺吶€�

    となりました。
    webフォントにはすべてなっていない状態で、firefox以外は日本語が文字化けしました。
    英語はすべて出ました。

    キャンセル

  • 2016/09/01 08:46

    サンプルのコードはかなり削って書いてしまったため、文字化けに関してはMETAで文字コードを指定すれば直るかもしれません。
    (どちらにしろ英語(アルファベット)も適用されていないのでダメですね。)

    公開予定日以前にアップしたくなければ、kei344さんの回答の通りフォントファイルのみ先にサーバーにアップ、URLフルパスでフォントファイルを指定したCSSをローカルで試してみてください。

    キャンセル

+1

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

【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 だけに絞っても問題ないかとは思いますが)

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

また、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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.08%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る