LeagueGothicのフォントを使用

Question

私は自分のサイトで「LeagueGothic」フォントまたはその類似品を使用しようとしています。 「http://www.woostercollective.com」や「http://www.superchief.tv」のようなサイトをヘッダーとして使用しています。何らかの理由で、私はファイヤーバグでヘッダースタイルをドラッグしてCSSにスローした後、「Arial」でレンダリングしています。私はこのフォントで何かを見逃していますか？私は" "ではなく、' 'に構文を切り替えて、いくつかのバリエーションを試しました。

font-family: "LeagueGothic","Helvetica Neue","Helvetica","Arial"; 

Answer 1

あなたのコンピュータにインストールされていないだけでなく、あなたのサイトにアクセスする他のほとんどのフォントにフォントが表示されません。 SuperChiefは、ファイル自体にフォントをホスティングし、そのCSSにフォントを追加する@font-face宣言を使用してこの回避します：

@font-face { 
    font-family: 'LeagueGothic'; 
    src: url('fonts/league_gothic/league_gothic-webfont.eot'); 
    src: url('fonts/league_gothic/league_gothic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/league_gothic/league_gothic-webfont.woff') format('woff'), 
     url('fonts/league_gothic/league_gothic-webfont.ttf') format('truetype'), 
     url('fonts/league_gothic/league_gothic-webfont.svg#LeagueGothicRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

このコードは、あなたがあなたのページにフォントを含めるために使用することができますFontSquirrel generator、からになりそうです。

生成したフォントファイルをサーバーに保存し、@font-face宣言で参照する必要があります。あなたはOPで行ったように、あなたはそれらを指定することができます。

font-family: "LeagueGothic","Helvetica Neue","Helvetica","Arial"; 

は、各font-familyは、それが自分の@font-face宣言だ必要があることに注意してください。

コメントにceejayozが書いた良い点は、の一部のフォントでは、Webページでライセンスを使用する必要があることがあります。 FontSquirrelもこの警告を表示しますので、ページ内のフォントを使用することを許可してください。

---

別の解決策は、GoogleがそのWebfontsサービスにあなたのためのフォントをホストできるようになります。あなた自身の@font-faceとそれ以上のものを使用するよりも簡単ですが、あなたが望む正確なものを含まない、より限定されたフォントの選択が得られます。同様のフォントまたは置換が見つかりました。