2017-03-10 3 views
2

私はこのフォント "Albermarle Swash"を表示しようとしていますが、インターネットで回答を検索した後、回答が見つかりません。誰かが私が間違っていることを知っていますか?私はChromeを使用していますが、FFやIEで試してみました。CSSのフォントフェイスURLで何が問題になっていますか?

@font-face { 
    font-family: 'AlbermarleSwash'; 
    src: url('http://ensabahone.000webhostapp.com/fonts/AlbemarleSwash.ttf') format('truetype'); 
} 

h1 { 
    font-family: 'AlbermarleSwash'; 
} 

http://jsfiddle.net/6vURk/11/

私も試してみた、と運:私はちょうどあなたのフィドルを見て、クロスオリジンの誤りに気づい

<link href='http://ensabahone.000webhostapp.com'; rel='stylesheet' type='text/css'> 
+1

を通過することができます仕事 – user7357089

+2

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_font-face_rule – user7357089

答えて

2

はいクロスオリジンの問題があるともあなたはすべてのデバイスのより良いサポートのためのウェブフォントにフォントを変換する必要があり、あなたはそれがかもしれない、フォントをダウンロードして、内部リンクとして与えるhttps://transfonter.org/

@font-face { 
    font-family: 'Albemarle Swash'; 
    src: url('AlbemarleSwash.eot'); 
    src: url('AlbemarleSwash.eot?#iefix') format('embedded-opentype'), 
     url('AlbemarleSwash.woff2') format('woff2'), 
     url('AlbemarleSwash.woff') format('woff'), 
     url('AlbemarleSwash.ttf') format('truetype'), 
     url('AlbemarleSwash.svg#AlbemarleSwash') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
2

...クロス起源はあなたに許可していませんあなた自身のウェブサイトにアクセスして、クリックミーティングやその他の悪意のある技術(JSONPなど)を回避します。ファイルをダウンロードして自分のサーバーにアップロードし、ローカルで使用することをお勧めします。

合計:このファイルは、クロスオリジンポリシーのために他のWebホストにある間は使用できません。ダウンロードして自分のWebサーバーにアップロードするだけです。

関連する問題