@ font-face not working

Question

なぜフォントが表示されないのかわかりません。お手伝いください。

（CSSフォルダ内）CSS： のstyle.css：

@font-face { 
font-family: Gotham; 
src: url(../fonts/gothammedium.eot); 
src: local('Gotham-Medium'), 
url(../fonts/Gotham-Medium.ttf) format('truetype'); 
} 

a { 
font-family:Gotham,Verdana,Arial; 
} 

Answer 1

2つのピリオド（..）は、1つのフォルダに移動し、スラッシュの後ろにあるフォルダを探します。たとえば ：

あなたのindex.htmlがフォルダhtml/filesにあり、フォントがhtml/fontsにある場合（あなたが/fontsに行くために一つのフォルダをバックに行かなければならないので）、...大丈夫です。あなたのindex.htmlはhtmlで、フォントはhtml/fontsであるので、1つの期間しか使用しないでください。

ブラウザが.eot font-filesをサポートしていない可能性があります。

あなたのコードの多くを見ることなく（あなたのウェブサイトのライブバージョンへのリンクかもしれません）、私は本当にあなたをさらに助けることはできません。

編集：.eot部分を忘れて、私はあなたのCSSの.ttfファイルを見逃しました。

は、以下のことを試してみてください：フォントフェイスを使用して

@font-face { 
font-family: Gotham; 
src: url(../fonts/gothammedium.eot); 
src: url(../fonts/Gotham-Medium.ttf); 
} 

Answer 2

ないあなたの問題があるまさに確かに、しかし、次のことを試してください：フォントファイルが

1. 存在しますか？
2. URLの周りに引用符が必要ですか？
3. CSS3-enabled browserを使用していますか？彼らはあなたのために動作しない場合の例について

Check here、あなたが持っている別の問題

編集：あなたがあなたの元に繰り返し宣言の束を持って

、この動作しますか？

@font-face { font-family: Gotham; src: url('../fonts/gothammedium.eot'); } 

a { font-family:Gotham,Verdana,Arial; } 

Answer 3

は、ブラウザの不整合のほとんど理解が必要であり、Webサーバ自体にいくつかの変更が必要な場合があります。まず行うべきことは、コンソールが生成されているかどうかを確認することです。アクセス許可の問題またはリソースが見つかりません....？

第2に、それぞれのブラウザが異なるフォントタイプを期待しているので、Font Squirrelを使用してフォントをアップロードし、追加のファイルとCSSを生成する必要があります。 http://www.fontsquirrel.com/fontface/generator

最後に、FireFoxとIEのバージョンでは、フォントをクロスドメインに読み込むことはできません。

Answer 4

私は最近この問題を抱えていましたが、私のWebサーバーがwoffファイルを提供するように設定されていないという問題がありました。 IIS 7の場合は、サイトを選択して[MIMEタイプ]アイコンを選択します。 .woffがリストにない場合は、追加する必要があります。正しい値が

File name extension: .woff 
MIME type: application/font-woff 

Answer 5

ある私は、この同じ問題を抱えていたと私は私は誰もが、特にこの問題に対処見ていなかったとして、私は私の解決策を共有しようと思いました。

問題は正しいパスを使用していないことでした。私のCSSは、このように見えた：私は私のCSSのフォルダ内にある私のCSSファイルからフォントを参照していますことを

@font-face { 
font-family: 'sonhoregular'; 
src: url('fonts/vtkssonho-webfont.eot'); 
src: url('fonts/vtkssonho-webfont.eot?') format('embedded-opentype'), 
    url('fonts/vtkssonho-webfont.woff2') format('woff2'), 
    url('fonts/vtkssonho-webfont.woff') format('woff'), 
    url('fonts/vtkssonho-webfont.ttf') format('truetype'), 
    url('fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg'); 
font-weight: normal; 
font-style: normal; 

パスに問題があります。 最初にレベルアップしてからフォントフォルダーに移動する必要がありました。 これは今のように見え、素晴らしいです。

@font-face { 
font-family: 'sonhoregular'; 
src: url('../fonts/vtkssonho-webfont.eot'); 
src: url('../fonts/vtkssonho-webfont.eot?') format('embedded-opentype'), 
    url('../fonts/vtkssonho-webfont.woff2') format('woff2'), 
    url('../fonts/vtkssonho-webfont.woff') format('woff'), 
    url('../fonts/vtkssonho-webfont.ttf') format('truetype'), 
    url('../fonts/vtkssonho-webfont.svg#vtks_sonhoregular') format('svg'); 
font-weight: normal; 
font-style: normal; 

私はこれが誰かを助けることを願っています！

Answer 6

..演算子を使用すると、フォルダパスが重複していて、/wp-content/themes/wp-content/themes/twentysixteen/fonts/のようになります。

ブラウザでコンソールを使用して、このエラーを確認してください。

Answer 7

私もこの種の問題に直面しています。すべてのソリューションを試した後、私はこの問題に関する最終的な解決策を得ました。このタイプの問題の原因は、定義済みのグローバルフォントです。フォントフェイス @に各ラインの！重要キーワードを使用してこの問題の解決策です。

この問題の解決のための

詳しい説明と例はここにある： - http://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Answer 8

tag.Itが私のために働いたの頭の中のhtmlの下に入れてみてください。

<title>ABC</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

Answer 9

私は、アラビア語のクライアントのために開発し、私のフォントを作成するには、フォントジェネレータを使用した後、同様にこのような問題がありました。私が生成していたフォントはどれも動作していませんでした。

私は西洋語の字形（あらかじめ選択されたオプション）を使用するだけでなく、私が選択する必要があったジェネレータの "詳細オプション"に設定があることが判明しました。

このサブセットを削除した後、私のフォントはアラビア語の文字で動作しました。私はこれがこのポジションの他の誰かを助けることを望む。

いいえお返事

Answer 10

フォントファイル名/パスを引用符で囲む必要があります。
例：また

url("../fonts/Gotham-Medium.ttf") 

または

url('../fonts/Gotham-Medium.ttf') 

なく

url(../fonts/Gotham-Medium.ttf) 

@FONT-FACEのみ、一部のフォントファイルで動作します。：フォントが働き、あなたが決して、フォントをダウンロードしないと言うことができます（

すべてのサイトoをするものではない