@ font-face：Firefoxではフォントファイルのダウンロードを許可する必要があります

Question

CargoCollectiveプラットフォームでサイトを実行しています。 ChromeとSafariではなく、Firefoxで

@font-face { font-family: 'Meta'; 
       src: url('https://www.sugarsync.com/pf/D7160824_3237110_68577?directDownload=true') format('embedded-opentype'), 
         url('https://www.sugarsync.com/pf/D7160824_3237110_68571?directDownload=true') format('truetype'), 
         url('https://www.sugarsync.com/pf/D7160824_3237110_68573?directDownload=true') format('woff'), 
         url('https://www.sugarsync.com/pf/D7160824_3237110_68579?directDownload=true#Meta') format('svg'); 
       font-weight: normal; 
       text-shadow: 0 1px 0 rgba(255,255,255,0.01); 
       } 

作品を次のようにフォントフェイス@指定

。 Internet Explorerで動作する必要があります。なぜなら、EOTが一番上にあり、URLには '？'が含まれているからです。私はMac上でこのようにテストする方法はありませんが、IEは代替文字列をクエリ文字列と考えるようにしています。

問題は、Firefox（10.0.2、Mac）では、要求されているフォントがフォントをダウンロードするための許可を必要としているようですので、それをダウンロードすることはなく、デフォルトセリフが表示されます。劇的に外観。

は、スタイリングは、例えば、正しい階層構造で、いつものように、CSSにも宣言されています。これは率直に言って、機能しない理由

body { 
     font-family: Meta, Helvetica, Arial, sans-serif; 
     } 

わかりません。私は、Firefoxが通常、リスト内の最後のフォントをダウンロードしていると聞いたことがあります。これは、SVGとして読書順の最後のファイルタイプと、URLの最後に#Fontnameを使って指定したフォント名があります。これが問題だろうか？この場合、SVGフォント名を指定しないことを選択できますか？

また、これはFirefoxでも貨物でホストされている別のウェブサイトでは機能しません。

状況が少し異なり、この1との明白な問題を除外するようだ：

@font-face { font-family: 'Egyptienne'; 
       src url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.eot') format('embedded-opentype'); 
       src: local('☺'), 
       url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.ttf') format('truetype'), 
       url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.woff') format('woff'), 
       url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.svg') format('svg'); 
       font-weight: normal; 
       text-shadow: 0 1px 0 rgba(255,255,255,0.01); 
       } 

しかし、再び、フォント：あり

を、コードは古い「防弾」メソッドを使用しています私は残しておきます。私は、他の状況で問題になる可能性があり思ったが、

違いがで除外されているように見えるこの1：

• HTTP対HTTPS（私は当初のSの後ろにあることで、それが問題だと思いましたHTTPS）
• SVG名前が指定されたことがない、とさえクエリ文字列が

[また、おそらく無関係なことを混同しないですが、誰かが尋ねる前に、テキスト-shadowプロパティを細かくウィンドウでテキストのレンダリングを改善することです。]

最後に、問題はアクセスコントロールヘッダーであると仮定しますが、編集可能な.htaccessがないため、これらをフォントフェイスコードにどのように追加しますか？

ありがとうございます！

Answer 1

Firefoxでは、フォントリソースを別のドメインから読み込むことはできません。これを明示的にdropbox.comサーバの.htaccessファイルで許可する必要があります。

ここに抜粋です：

<FilesMatch "\.(ttf|otf|woff)$"> 
<IfModule mod_headers.c> 
     Header set Access-Control-Allow-Origin "*" 
</IfModule> 
</FilesMatch> 

あるいはさらに良い、上記のコードは、誰もが浸出することができますので、：

<FilesMatch "\.(eot|otf|woff|ttf)$"> 
    SetEnvIf Origin » 
    "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0 
    Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is 
</FilesMatch> 

詳しい情報はここで見つけることができます：http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

Answer 2

私たちが持っていました同じ問題。これは、アプリケーションの不正な権限設定でした。 de/fonts /フォルダのより具体的な機能アプリケーションは/ fonts /フォルダーのリソースへのアクセスを制限していました。フォントをダウンロードするようブラウザに強制してください...私の英語については残念です。